jquery.validate表单验证插件使用详解

2024-02-18 14:05:03 149

今天我们来说一下表单验证，有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的，现在我来给大家介绍一下表单验证的插件：jquery.validate.min.js

它是与jquery一起结合用来使用的，使用它是非常方便，只需写校验规则和错误字段即可。

我们常见的校验规则有以下几种：

(1)required:true 必输字段
(2)email:true 必须输入正确格式的电子邮件
(3)date:true 必须输入正确格式的日期
(4)dateISO:true 必须输入正确格式的日期(ISO)
(5)digits:true 必须输入整数
(6)equalTo:"#pass" 输入值必须和#pass相同
(7)maxlength:5 输入长度最多是5的字符串
(8)minlength:10 输入长度最小是10的字符串
(9)rangelength:[5,10] 输入长度必须介于5和10之间
(10)range:[5,10] 输入值必须介于5和10之间
(11)max:5 输入值不能大于5
(12)min:10 输入值不能小于10

然后接着写提示字段就可以了，不过可以不写，因为它有英文的提示字段，下面就来请大家看一下以下代码：

我们在使用插件之前必不可缺的是要引入jquery文件和插件

然后就来看一下html代码

//写表单验证比不缺少的是我们的form标签
//关于用户名的布局
username:



//关于密码的布局
password:


//重置密码
form-password:


//年龄
age:


//email
email:


//我们在提交数据时提交的按钮应该为submit类型的

接着再来看一下js代码

$(function(){
$("#mgForm").validate({
rules:{//写入文本框中的限制条件
username:{//指的是input中name的名字
required:true,//不能为空
minlength:6,//最短为6个
maxlength:10//最长为10个
},
age:{
//range:[18,80]//年龄范围为18-80
required:true,//不能为空
},
password:{
required:true,//必填
rangelength:[2,6]//长度为2-6
},
password1:{
equalTo:"#pass"//重置密码必须与#pass中的密码保持一致
},
email:{
email:true//email保证格式正确
}
},
messages:{//提示信息
username:{//用户名
required:"*此项必填",
minlength:"*用户名最小是6位",
maxlength:"*用户名最大是10位"
},
age:{//年龄
range:"*年龄必须在18-80之间"
PostCode:"错误"
},
password:{//密码
required:"*必填",
rangelength:"2-6"
},
password1:{//重置密码
equalTo:"*密码不一致"
},
email:{//邮箱格式
email:"*邮箱格式不正确"
}
},
submitHanfler:function(){//如果全部验证正确就弹出弹窗
alert("全部通过")
},
errorClass:"wrong",//给错误字段添加wrong样式
ignore:"#pass1",//忽略密码不一
errorElement:"div",//错误信息单独显示一行
focusInvalid:true,//提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点
focusCleanup:true,//当未通过验证的元素获得焦点时,并移除错误提示
highlight:function(element,errorClass){//在信息错误时会出现一闪的效果
$(element).addClass(errorClass);
$(element).fadeOut().fadeIn()
}
});
$.validator.addMethod("PostCode",function(){//此外，我们还可自定义样式
varreg=/^[0-9]{6}$/;
returnreg.test(value)
},"邮编输入不正确");
});

今天的表带验证插件你们学会了嘛？

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

jquery.validate表单验证插件使用详解

热门推荐

随机推荐