validation插件

jquery-validation插件

jQuery Validation插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。

一、下载

插件下载地址:https://jqueryvalidation.org/

二、使用

引入js文件:

<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.validate-1.13.1.js"></script>

js代码:

$("form").validate(
    //配置项
);

三、API

1、rules:定义校验规则

rules:{
            first_word_input:{
                required:true
            },
            brand_choose_input:{
                required:true
            }
        }

2、messages:定义提示信息

messages:{
            first_word_input:{
                required:"*请选择首字母"
            },
            brand_choose_input:{
                required:"*请选择品类"
            }
        }

3、ignore:对某些元素不进行验证

4、debug:只验证不提交

如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便。

debug:true

5、errorClass:指定错误提示的 css 类名,可以自定义错误提示的样式

6、errorElement: 使用什么标签标记错误

7、errorPlacement:Callback 指明错误放置的位置,默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面。
errorPlacement : function(error, element) {
            //忽略自定义的方法错误提示
            if (error.text() == "ignore") {
                return true;
            }
            error.appendTo(element.parents(".form-group"));
        }
8、submitHandler: 通过验证后运行的函数,可以加上表单提交的方法

submitHandler:function(form){
form.submit(); //form是DOM对象
}

9、验证的触发方式修改

技术分享

10、自定义验证方法

jQuery.validator.addMethod(name,method,[message]);

参数:

  name:方法名称
  method:function(value,element,params)方法逻辑,value是元素的值,element是元素本身 param是参数
  message:提示消息
// 邮政编码验证   
jQuery.validator.addMethod("isZipCode", function(value, element) {   
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
 

四、实例

$("form").validate({
    debug:true,
    rules:{
        first_word_input:{
                required:true
            },
            brand_choose_input:{
                required:true
            }
    },
    messages:{
            first_word_input:{
                required:"*请选择首字母"
            },
            brand_choose_input:{
                required:"*请选择品类"
            }
    },
    errorClass:"error_tip",
    errorElement: "label",
    errorPlacement : function(error, element) {
            //忽略自定义的方法错误提示
        if (error.text() == "ignore") {
                return true;
            }
        error.appendTo(element.parents(".form-group"));
    },
    submitHandler:function(form){
            form.aubmit();
    }              
});

jQuery.validator.addMethod("isZipCode", function(value, element) {   
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
参考:https://blog.csdn.net/fulishafulisha/article/details/82079723

你可能感兴趣的:(validation插件,MVC验证,Web,API)