详解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 相关文章推荐
js中array的sort()方法使用介绍
Feb 20 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
JavaScript中this函数使用实例解析
Feb 21 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 Javascript
原生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
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP中常用的转义函数
2014/02/28 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
python使用urllib2提交http post请求的方法
2015/05/26 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
青年志愿者事迹材料
2014/02/07 职场文书
部队万能检讨书
2014/02/20 职场文书
2014年司法所工作总结
2014/11/22 职场文书
送达通知书
2015/04/25 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
浅谈Python 中的复数问题
2021/05/19 Python