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

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

创新互联建站是一家以网络技术公司,为中小企业提供网站维护、网站制作、成都网站制作、网站备案、服务器租用、申请域名、软件开发、微信小程序定制开发等企业互联网相关业务,是一家有着丰富的互联网运营推广经验的科技公司,有着多年的网站建站经验,致力于帮助中小企业在互联网让打出自已的品牌和口碑,让企业在互联网上打开一个面向全国乃至全球的业务窗口:建站联系电话:028-86922220

它是与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标签
//关于用户名的布局
//关于密码的布局
//重置密码
//年龄
//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 () { //此外,我们还可自定义样式
          var reg=/^[0-9]{6}$/;
          return reg.test(value)
        },"邮编输入不正确");
      });

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


名称栏目:jquery.validate表单验证插件使用详解
网页路径:http://myzitong.com/article/jgsice.html