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自定义图片上传插件实例代码
Apr 04 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
jQuery实现带进度条的轮播图
Sep 13 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概述.
2006/10/09 PHP
php中数组首字符过滤功能代码
2012/07/31 PHP
php简单实现MVC
2015/02/05 PHP
3种php生成唯一id的方法
2015/11/23 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
php unlink()函数使用教程
2018/07/12 PHP
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
js Calender控件使用详解
2015/01/05 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
python实现抖音视频批量下载
2018/06/20 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
python中pop()函数的语法与实例
2020/12/01 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
教师求职推荐信范文
2013/11/20 职场文书
土木工程个人自荐信范文
2013/11/30 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
Go语言grpc和protobuf
2022/04/13 Golang