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


Posted in jQuery onJune 21, 2017

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

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

然后就来看一下html代码

<form action="" id="mgForm"> //写表单验证比不缺少的是我们的form标签
  <div> //关于用户名的布局
    <label for="user">username:</label>
    <input type="text" name="username" id="user">
  </div>

  <div>//关于密码的布局
    <label for="pass">password:</label>
    <input type="text" name="password" id="pass">
  </div>
  <div>//重置密码
    <label for="pass1">form-password:</label>
    <input type="text" name="password1" id="pass1">
  </div>
  <div>//年龄
    <label for="age">age:</label>
    <input type="text" name="age" id="age">
  </div>
  <div>//email
    <label for="email">email:</label>
    <input type="text" name="email" id="email">
  </div>
  <input type="submit" value="提交"> //我们在提交数据时提交的按钮应该为submit类型的
</form>

接着再来看一下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 相关文章推荐
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jQuery实现div跟随鼠标移动
Aug 20 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
jquery实现广告上下滚动效果
Mar 04 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 #jQuery
jquery加载单文件vue组件的方法
Jun 20 #jQuery
jQuery 实现双击编辑表格功能
Jun 19 #jQuery
jQuery实现简单的手风琴效果
Apr 17 #jQuery
jQuery自定义多选下拉框效果
Jun 19 #jQuery
jQuery实现下拉菜单的实例代码
Jun 19 #jQuery
jquery DataTable实现前后台动态分页
Jun 17 #jQuery
You might like
thinkphp循环结构用法实例
2014/11/24 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
Python给图像添加噪声具体操作
2019/03/03 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
python实现文件的备份流程详解
2019/06/18 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
Django权限控制的使用
2021/01/07 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
写一个方法1000的阶乘
2012/11/21 面试题
介绍一下Make? 为什么使用make
2013/12/08 面试题
大学应届生求职简历的自我评价
2013/10/08 职场文书
高中生毕业自我鉴定
2013/10/10 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
班级口号大全
2014/06/09 职场文书
文员岗位职责
2015/02/04 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis