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 extend()详解及简单实例
May 06 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery中event.target和this的区别详解
Aug 13 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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
php实现用户在线时间统计详解
2011/10/08 PHP
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
PHP守护进程实例
2015/03/06 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
JS实现图片切换特效
2019/12/23 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
Python实现方便使用的级联进度信息实例
2015/05/05 Python
python查询sqlite数据表的方法
2015/05/08 Python
python GUI实例学习
2017/11/21 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
python实现按行分割文件
2019/07/22 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
房屋租赁委托书范本
2014/10/04 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
研讨会通知
2015/04/27 职场文书
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang