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 Validate 校验多个相同name的方法
May 18 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
jQuery冲突问题解决方法
Jan 19 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
Snoopy类使用小例子
2008/04/15 PHP
php建立Ftp连接的方法
2015/03/07 PHP
PHP 8新特性简介
2020/08/18 PHP
js获取单选按钮的数据
2006/11/27 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
讲解Python中if语句的嵌套用法
2015/05/14 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
Python实现微信小程序支付功能
2019/07/25 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
党校培训自我鉴定
2014/02/01 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
新农村建设标语
2014/06/24 职场文书
公司踏青活动方案
2014/08/16 职场文书
五年级学生期末评语
2014/12/26 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
MongoDB支持的索引类型
2022/04/11 MongoDB
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电
app场景下uniapp的扫码记录
2022/07/23 Java/Android