详解jquery validate实现表单验证 (正则表达式)


Posted in Javascript onJanuary 18, 2017

一、目的

为了更好地实现人机交互,使用jQuery封装库中的validate插件,在用户填写表单时,可以快速地对用户填写的数据进行验证,并做出反馈。

二、validate插件简介  

validate()是插件的核心方法,定义了基本的校验规则和一些有用的配置项。

  • rule:设置表单的验证规则;
  • messages:设置表单不符合验证规则的提示信息;
  • debug:如果这个参数为true,那么表单还会提交,只进行检查,调试时十分方便。

required:必填

minlength:最小长度

maxlength:最大长度

rangelength:长度范围,以数组呈现[2,10],表示表单输入长度为2到10位

remote:可以通过发现GET或者POST请求进行远程验证,与Ajax的验证进行比较。就是通过ajax实现的

    url:
    type:默认为GET请求
    data:发送的数据

发送GET请求例子:

check:{
          required:true,
          remote:{
            url:"__CONTROLLER__/check?check="+$("#icode").val
            //__CONTROLLER__表示当前控制器
          }
        }

基本的校验规则

序号 规则 描述
1 required:true 必须输入的字段。
2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
6 dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
7 number:true 必须输入合法的数字(负数,小数)。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalTo:"#field" 输入值必须和 #field 相同。
11 accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。
12 maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。
13 minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。
14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min:10 输入值不能小于 10。

validator对象

  • validator.form()验证表单是否有效,返回true或者false;
  • validator.element(element)验证表单中某个元素是否有效,返回true或者false;
  • validator.resetForm()把表单恢复到验证前原来的状态;
  • validator.showErrors(error)针对元素显示特定的错误信息;
  • validator.numberOfInvalids()返回无效的元素数量;

validator对象的静态方法

  • jQuery.validator.addMethod()增加自定义的验证方法;  (即$.validator.addMethod())
  • jQuery.validator.format()格式化字符串,用参数代替模板中的{n};
  • jQuery.validator.setDefaults()修改插件默认设计;
  • jQuery.validator.addClassRules()为某些包含名为name的class增加组合验证类型。
$.validator.addClassRules({
  txt:{
    required:true,
    rangelength:[2,10]
  }
})//这时class="txt"的类都具备了这个两个验证规则

获取表单元素的验证规则:

$("#username").rules();

为表单元素添加验证规则: 

$("#username").rules('add',rules);

为表单元素删除验证规则:

$("#username").rules('remove',rules);

三、正则表达式

常用正则表达式:

用户名的正则表达式验证:/^[\w\u4e00-\u9fa5]{2,10}/g(含汉字)

用户名验证:/^\w{2,10}$/(不含汉字,只允许英文字母、数字和下画线,长度为2-10位)

QQ号验证:/^[1,9][0,9]{4,19}$/(第一位数字不为0,5-19位数字)

邮箱验证:/^[a-z0-9]+@([a-z0-9]+\.)+[a-z]{2,4}$/i(不区分大小写)

密码验证:/^\w{6,16}$/(只允许6-16位英文字母、数字和下画线)

手机号验证:/^1[3,5,7,8]\d{9}$/

URL验证:/^http:\/\/[a-z\d-]+(\w\/)+)$/i

$(document).ready(function(){ 
  $("#table").validate({ 
    rules:{ 
      admin_name:{ 
        required:true, 
        checkName:true, 
      }, 
      name:{ 
        required:true,          
      }, 
      admin_pwd:{ 
        required:true, 
        checkPwd:true, 
      }, 
      con_pwd:{ 
        required:true, 
        equalTo:admin_pwd, 
      }, 
      email:{ 
        required:true, 
        checkEmail:true, 
      }, 
      qq:{ 
        required:true, 
        checkQQ:true, 
      }, 
      s_page:{ 
        url:true, 
         
      }, 
      check:{ 
        //required:true, 
        //remote:{ 
          //url:"__CONTROLLER__/check?check="+$("#icode").val, 
          //__CONTROLLER__表示当前控制器 
          //dataType:"json", 
        //} 
      } 
    }, 
    messages:{ 
      admin_name:{ 
        required:"*必填!", 
        rangelength:"*长度为2到10位!", 
      }, 
      name:{ 
        required:"*必填!", 
      }, 
      admin_pwd:{ 
        required:"*必填!", 
        rangelength:"*长度为6到16位!", 
      }, 
      con_pwd:{ 
        required:"*必填!", 
        equalTo:"*两次输入的密码不一致!" 
      }, 
      email:{ 
        required:"*必填!", 
        email:"*请输入正确的邮箱!", 
      }, 
      qq:{ 
        required:"*必填!", 
      }, 
      s_page:{ 
        url:"*请输入正确的网页地址!", 
      }, 
      check:{ 
        required:"*必填!", 
        remote:"*验证码有误!", 
      }, 
    }, 
    //是否在获取焦点时验证 
    //onfocusout:false, 
    //是否在敲击键盘时验证 
    //onkeyup:false, 
    //提交表单后,(第一个)未通过验证的表单获得焦点 
    focusInvalid:true, 
    //当未通过验证的元素获得焦点时,移除错误提示 
    focusCleanup:true, 
  }); 
   
  //自定义正则表达示验证方法 
  $.validator.addMethod("checkQQ",function(value,element,params){ 
      var checkQQ = /^[1-9][0-9]{4,19}$/; 
      return this.optional(element)||(checkQQ.test(value)); 
    },"*请输入正确的QQ号码!"); 
     
  $.validator.addMethod("checkEmail",function(value,element,params){ 
      var checkEmail = /^[a-z0-9]+@([a-z0-9]+\.)+[a-z]{2,4}$/i; 
      return this.optional(element)||(checkEmail.test(value)); 
    },"*请输入正确的邮箱!"); 
     
  $.validator.addMethod("checkName",function(value,element,params){ 
      var checkName = /^\w{2,10}$/g; 
      return this.optional(element)||(checkName.test(value)); 
    },"*只允许2-10位英文字母、数字或者下画线!"); 
   
  $.validator.addMethod("checkPwd",function(value,element,params){ 
      var checkPwd = /^\w{6,16}$/g; 
      return this.optional(element)||(checkPwd.test(value)); 
    },"*只允许6-16位英文字母、数字或者下画线!"); 
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 基于原型的对象(创建、调用)
Oct 16 Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
js HTML5 Canvas绘制转盘抽奖
Sep 13 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
原生js实现中奖信息无间隙滚动效果
Jan 18 #Javascript
js实现简单的网页换肤效果
Jan 18 #Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 #Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 #Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 #Javascript
js实现消息滚动效果
Jan 18 #Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 #Javascript
You might like
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
python ansible服务及剧本编写
2017/12/29 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
Python中调用其他程序的方式详解
2019/08/06 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
Python 中@property的用法详解
2020/01/15 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
python打包多类型文件的操作方法
2020/09/21 Python
python 实用工具状态机transitions
2020/11/21 Python
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
党校自我鉴定范文
2013/10/02 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
工作证明英文模板
2014/10/21 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript