记下jquery_validation表单验证插件如何使用

2017-01-12 本文已影响164人无敌小帅

恩这个插件比较简单好用的表单验证插件，记录下用法省的以后再用时候忘了再找

下载最新validation 以及jq
在项目中引入

屏幕快照 2017-01-12 上午11.13.27.png
validation 校验规则
(1)required:true 必输字段
(2)remote:”check.PHP” 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true 必须输入合法的数字(负数，小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:”#field” 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5(17)min:10 输入值不能小于10
我的HTML结构最外面一定是form标签

屏幕快照 2017-01-12 上午11.17.02.png

*然后使用$(".signForm").validat({})声明使用里面有两个必须设置的参数一个是rules:{}用来设置规则，一个是messages:{}设置验证信息如果不设置使用默认信息（英文）
代码如下：

 // 验证规则
    $(function(){
        $(".signForm").validate({
            rules:{
                username:{
                    required: true,
                    rangelength:[3,9]
                 },
                 pass:{
                    required: true,
                    rangelength:[6,12]
                 },
                 pass_again:{
                    required: true,
                    
                    equalTo: ".pass"
                 },
                 phone:{
                    required: true,
                    phone:true,
                 }
            },
             // 提示信息
             messages:{
                username:{
                    required: "请输入用户名",
                    rangelength:"用户名必须大于3且小于9个字符"
                 },
                 pass:{
                    required: "请输入密码",
                    rangelength:"密码必须大于6且小于12个字符"
                 },
                 pass_again:{
                    required: "请输入密码",
                    
                    equalTo: "两次输入的密码不一致"
                 },
                 phone:{
                    required: "请输入您的手机号",
                    
                 },
             }

        })
    })

运行后效果

屏幕快照 2017-01-12 上午11.32.48.png

我们也可以自定义验证规则比如上例 validation默认没有电话号码的验证我们可以使用jQuery.validator.addMethod(name,method,message)
参数method是一个函数,接收三个参数(value,element,param)
value 是元素的值,
element是元素本身
param是参数,我们可以用addMethod 来添加除built-in Validation methods 之外的验证方法比如有一个字段,只能输一个字母,范围是a-f,
事例代码如下

  jQuery.validator.addMethod("phone", function(value, element) {  
        var length = value.length;  
        var regPhone = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;  
        return this.optional(element) || ( length == 11 && regPhone.test( value ) );    
    }, "请正确填写您的手机号码");

更多例子请百度

还有
debug，只验证不提交表单如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便

$().ready(function() {
   $("#signupForm").validate({ 
         debug:true    
    });
});
//如果一个页面中有多个表单都想设置成为debug，用
$.validator.setDefaults({   debug: true})

名称	返回类型	描述
validate(options)	Validator	验证所选的 FORM。
valid()	Boolean	检查是否验证通过。
rules()	Options	返回元素的验证规则。
rules("add",rules)	Options	增加验证规则。
rules("remove",rules)	Options	删除验证规则。
removeAttrs(attributes)	Options	删除特殊属性并且返回它们。

更过用法参考：
菜鸟教程：http://www.runoob.com/jquery/jquery-plugin-validate.html

记下jquery_validation表单验证插件如何使用

猜你喜欢

热点阅读