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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jquery更改元素属性attr()方法操作示例
May 22 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
广播爱好者需要了解的天线知识
2021/03/01 无线电
PHP操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
php开启openssl的方法
2014/05/15 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
提高网站信任度的技巧
2008/10/17 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
Python双向循环链表实现方法分析
2018/07/30 Python
python进程和线程用法知识点总结
2019/05/28 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
高中自我鉴定
2013/12/20 职场文书
电气工程和自动化自荐信范文
2013/12/25 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
公证处委托书
2015/01/28 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python