详解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 相关文章推荐
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
JS匿名函数实例分析
Nov 26 Javascript
Vue组件开发初探
Feb 14 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
Vue计算属性的使用
Aug 04 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
antd design table更改某行数据的样式操作
Oct 31 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中的Memcache详解
2014/04/05 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
TBCompressor js代码压缩
2011/01/05 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
清除输入框内的空格
2016/12/21 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
跟老齐学Python之有点简约的元组
2014/09/24 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
机械工程师的岗位职责
2013/11/17 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
python基础之匿名函数详解
2021/04/21 Python
分享一些Java的常用工具
2021/06/11 Java/Android
Python访问Redis的详细操作
2021/06/26 Python
在Docker容器中部署SQL Server
2022/04/11 Servers