如何检查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/

Answer 2

尝试使用此代码来验证HTML标签

jQuery.validator.addMethod("noHTMLtags", function(value, element){
    if(this.optional(element) || /<\/?[^>]+(>|$)/g.test(value)){
        return false;
    } else {
        return true;
    }
}, "HTML tags are Not allowed.");



$('#form').validate({
rules: {
    message: {
        required: true , noHTMLtags: true
    }
}});

我希望这也是一个很好的例子。

Answer 3

这是我做过的事

$.validator.addMethod("CHECKDOB", function(value, element) {  
            return this.optional(element) || check_blank_dob(element); 
            }, "Please Enter Birth Date");

//请参见将checkdob函数添加到验证器

现在

在规则中

 rules:{
                        <%=txtfirstname.UniqueID %>: {required: true},                            <%=txtlastname.UniqueID %>: {required: true},
                        <%=txtdateofbirth.UniqueID %>: {                            required: true,
                        CHECKDOB:"Please Enter Birth Date",//see here i have called that function
                        date:true                  
                        },

现在的消息

messages: {
         <%=txtfirstname.UniqueID %>:{required: "Please Enter First Name"},
        <%=txtlastname.UniqueID %>:{required: "Please Enter Last Name"},
         <%=txtdateofbirth.UniqueID %>:{
          required: "Please Enter Birth Date",
          CHECKDOB:"Please Enter Birth Date",
          date:"Invalid Date! Please try again" 
                        },

这是你的功能

 function check_blank_dob()
    {
       var birth=document.getElementById("<%=txtdateofbirth.ClientID%>").value
       if(birth=="__/__/____")
       {
                return false;
       }
            return true;
    }

将方法添加到验证器时，请参阅在checkdob函数中调用的此函数

这只是示例，说明如何添加您必须实现的方法，希望这对您有所帮助。...:)

Answer 4

我使用正则表达式来防止文本区域中的HTML标签

$.validator.addMethod(
    "no_html",
    function(value, element) {
        if(/<(.|\n)*?>/g.test( value )){
            return false;
        }else{
            return true;
        }
    },
    "HTML tag is not allow."
);
$('#myform').validate({
    rules: {
        field1: {
            required: true,
            no_html: true
        }
    }        
});