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

今天我们来说一下表单验证，有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的，现在我来给大家介绍一下表单验证的插件：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文件和插件

rush:xhtml;">

然后就来看一下HTML代码

rush:xhtml;">

标签

//关于用户名的布局

//关于密码的布局

//重置密码

//年龄

//email

接着再来看一下js代码

rush: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 () { //此外，我们还可自定义样式 var reg=/^[0-9]{6}$/; return reg.test(value) },"邮编输入不正确"); });

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

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

jquery.validate表单验证 jquery.validate表单验证插件 jquery表单验证插件