如何检查HTML标记,然后在jQuery验证中添加错误

Question

我正在尝试使用jQuery Validation插件验证我的表单.

这是代码

    $(document).ready(function(){
        var productsForm=$('#products-form');
     productsForm.validate({
            //debug:true,
          invalidHandler: function(event, validator) {
    // 'this' refers to the form
    var errors = validator.numberOfInvalids();
    if (errors) {
    var message = errors == 1
    ? 'You missed 1 field. It has been highlighted'
    : 'You missed ' + errors + ' fields. They have been highlighted';
    $("div.error span").html(message);
    $("div.error").show();
    } else {
    $("div.error").hide();
    }
    },
         rules:{
             productName: {
                 required: true,
                 minlength:2,

//here i tried to create a function

                 onfocusout: function(element){
                 var myValue=$(element).val();
                 if(myValue.match(/[<>$]/))
                 {
                     alert('Please enter the Name without any tags.');
                     $(element).valid=false;
                 }
             }
             },
             productType: {
                 required: true,
                 minlength:2,

             },
             productBrand: {
                 required: true,
                 minlength:2,

             },
             description: {
                 required: true,
                 minlength:10,
                 maxlength:150,

             },
             updatedBy:{
                 required:true,
                 minlength:2,
             }
         },
         messages:{
             productName:{
                 required: "Please enter the productName",
                 minLength: "The name should be atleast 2 characters long",
             },
             productType: {
                 required: "Please enter the productType",
                 minlength:"The type should be atleast 2 characters long",

             },
             productBrand: {
                 required: "Please enter the productBrand",
                 minlength:"The Brand Name should be atleast 2 characters long",

             },
             description: {
                 required: "Please describe your product",
                 minlength: "The description should be atleast 10 characters long",
                 maxlength: "You can not enter more than 150 characters",

             },
             updatedBy:{
                 required: "PLease Your name",
                 minlength: "The name should be atleast 2 characters long",
             }
         },
         submitHandler: function(form){
             if(productsForm.valid())
             {

                alert('tada');
                 return false;
             }
             else
             {
                 alert('not valid');
                 return false;
             }
         }
     });   
    });

现在我正在尝试创建一个函数来检查输入值是否包含HTML标记.如果是,则显示错误消息,并且不提交表单.但我不知道该怎么做.有人可以帮忙吗？

我试图创建一个函数,onfocusout但不知道如何添加错误.

Answer 1

引用标题:

"如何检查HTML标记,然后在jQuery验证中添加错误"

如果您正在使用jQuery Validate插件,则只需为字段指定规则,并自动切换相应的错误消息.有自定义规则的内置方法和内置方法,可以使用自定义文本覆盖任何错误文本.插件会在任何错误期间自动阻止表单提交,包括从您的自定义规则触发的错误.

引用OP:

"现在我正在尝试创建一个函数来检查输入值是否包含html标签.如果是,则显示错误消息并且不提交表单."

您的第二句仅描述了每个验证规则的作用.检查输入数据并在此测试失败时阻止提交.您的第一句话是您希望规则执行的操作...确保输入中没有标记.

引用OP:

"我试图创建一个函数,onfocusout但不知道如何添加错误. "

您的代码尝试表明您正在使这种方式变得比它需要的更复杂.您不需要修改插件的任何单个回调函数只是为了创建一个新规则......此时您也可以从头开始编写自己的验证插件.

要实现您想要的,您只需使用该addMethod方法编写自己的自定义jQuery验证规则.在这种情况下,您需要一个排除HTML标签的正则表达式...可能只允许使用字母和数字.(调整正则表达式或用你认为合适的任何东西替换函数).

请参考这个非常基本的例子:

jQuery.validator.addMethod("noHTML", function(value, element) {
    // return true - means the field passed validation
    // return false - means the field failed validation and it triggers the error
    return this.optional(element) || /^([a-z0-9]+)$/.test(value);
}, "No HTML tags are allowed!");

$('#myform').validate({
    rules: {
        field1: {
            required: true,
            noHTML: true
        }
    }        
});

演示:http: //jsfiddle.net/mM2JF/

但是,该additional-methods.js文件已包含各种规则,可自动排除任何HTML ...

letterswithbasicpunc >>"请信件或标点符号"

alphanumeric =>"请字母,数字和下划线"

lettersonly >"请来信"

$('#myform').validate({
    rules: {
        field1: {
            required: true,
            alphanumeric: true  // <- will also not allow HTML
        }
    }        
});

演示2:http: //jsfiddle.net/mM2JF/1/