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-data的三种用法
Apr 18 jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jquery自定义组件实例详解
Dec 31 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
PHP 批量删除 sql语句
2009/06/05 PHP
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
python实现宿舍管理系统
2019/11/22 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
python基于openpyxl生成excel文件
2020/12/23 Python
python 递归相关知识总结
2021/03/03 Python
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
高三自我鉴定范文
2013/10/19 职场文书
测绘工程个人的自我评价
2013/11/10 职场文书
行政管理专业求职信
2014/07/06 职场文书
加强作风建设心得体会
2014/10/22 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
python 镜像环境搭建总结
2022/09/23 Python