jQuery EasyUI常用数据验证汇总


Posted in Javascript onSeptember 18, 2016

easyui 的validatebox()提供了自定义验证的方法,为此我把一些常用的数据验证汇总了一下,代码如下

$.extend($.fn.validatebox.defaults.rules, {
 CHS: {
  validator: function (value, param) {
   return /^[\u0391-\uFFE5]+$/.test(value);
  },
  message: '请输入汉字'
 },
 ZIP: {
  validator: function (value, param) {
   return /^[1-9]\d{5}$/.test(value);
  },
  message: '邮政编码不存在'
 },
 QQ: {
  validator: function (value, param) {
   return /^[1-9]\d{4,10}$/.test(value);
  },
  message: 'QQ号码不正确'
 },
 mobile: {
  validator: function (value, param) {
   return /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/.test(value);
  },
  message: '手机号码不正确'
 },
 loginName: {
  validator: function (value, param) {
   return /^[\u0391-\uFFE5\w]+$/.test(value);
  },
  message: '登录名称只允许汉字、英文字母、数字及下划线。'
 },
 safepass: {
  validator: function (value, param) {
   return safePassword(value);
  },
  message: '密码由字母和数字组成,至少6位'
 },
 equalTo: {
  validator: function (value, param) {
   return value == $(param[0]).val();
  },
  message: '两次输入的字符不一至'
 },
 number: {
  validator: function (value, param) {
   return /^\d+$/.test(value);
  },
  message: '请输入数字'
 },
 idcard: {
  validator: function (value, param) {
   return idCard(value);
  },
  message:'请输入正确的身份证号码'
 }
});

/* 密码由字母和数字组成,至少6位 */
var safePassword = function (value) {
 return !(/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/.test(value));
}

var idCard = function (value) {
 if (value.length == 18 && 18 != value.length) return false;
 var number = value.toLowerCase();
 var d, sum = 0, v = '10x98765432', w = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2], a = '11,12,13,14,15,21,22,23,31,32,33,34,35,36,37,41,42,43,44,45,46,50,51,52,53,54,61,62,63,64,65,71,81,82,91';
 var re = number.match(/^(\d{2})\d{4}(((\d{2})(\d{2})(\d{2})(\d{3}))|((\d{4})(\d{2})(\d{2})(\d{3}[x\d])))$/);
 if (re == null || a.indexOf(re[1]) < 0) return false;
 if (re[2].length == 9) {
  number = number.substr(0, 6) + '19' + number.substr(6);
  d = ['19' + re[4], re[5], re[6]].join('-');
 } else d = [re[9], re[10], re[11]].join('-');
 if (!isDateTime.call(d, 'yyyy-MM-dd')) return false;
 for (var i = 0; i < 17; i++) sum += number.charAt(i) * w[i];
 return (re[2].length == 9 || number.charAt(17) == v.charAt(sum % 11));
}

var isDateTime = function (format, reObj) {
 format = format || 'yyyy-MM-dd';
 var input = this, o = {}, d = new Date();
 var f1 = format.split(/[^a-z]+/gi), f2 = input.split(/\D+/g), f3 = format.split(/[a-z]+/gi), f4 = input.split(/\d+/g);
 var len = f1.length, len1 = f3.length;
 if (len != f2.length || len1 != f4.length) return false;
 for (var i = 0; i < len1; i++) if (f3[i] != f4[i]) return false;
 for (var i = 0; i < len; i++) o[f1[i]] = f2[i];
 o.yyyy = s(o.yyyy, o.yy, d.getFullYear(), 9999, 4);
 o.MM = s(o.MM, o.M, d.getMonth() + 1, 12);
 o.dd = s(o.dd, o.d, d.getDate(), 31);
 o.hh = s(o.hh, o.h, d.getHours(), 24);
 o.mm = s(o.mm, o.m, d.getMinutes());
 o.ss = s(o.ss, o.s, d.getSeconds());
 o.ms = s(o.ms, o.ms, d.getMilliseconds(), 999, 3);
 if (o.yyyy + o.MM + o.dd + o.hh + o.mm + o.ss + o.ms < 0) return false;
 if (o.yyyy < 100) o.yyyy += (o.yyyy > 30 ? 1900 : 2000);
 d = new Date(o.yyyy, o.MM - 1, o.dd, o.hh, o.mm, o.ss, o.ms);
 var reVal = d.getFullYear() == o.yyyy && d.getMonth() + 1 == o.MM && d.getDate() == o.dd && d.getHours() == o.hh && d.getMinutes() == o.mm && d.getSeconds() == o.ss && d.getMilliseconds() == o.ms;
 return reVal && reObj ? d : reVal;
 function s(s1, s2, s3, s4, s5) {
  s4 = s4 || 60, s5 = s5 || 2;
  var reVal = s3;
  if (s1 != undefined && s1 != '' || !isNaN(s1)) reVal = s1 * 1;
  if (s2 != undefined && s2 != '' && !isNaN(s2)) reVal = s2 * 1;
  return (reVal == s1 && s1.length != s5 || reVal > s4) ? -10000 : reVal;
 }
};

页面中要引入jquery.js 和 easyui.min.js 

html 代码中使用如下

<table class="grid" id="uiform">
<tr><td>登录名:</td><td><input required="true" id="txtUsername" type="text" class="txt03" /></td><td>真实姓名:</td><td><input id="txtTruename" validType="CHS" required="true" type="text" class="txt03" /></td></tr>
<tr><td>登录密码:</td><td><input validType="safepass" required="true" id="txtPassword" name="password" type="password" class="txt03" /></td><td>Email:</td><td><input id="txtEmail" name="email" validType="email" type="text" class="txt03" /></td></tr>
<tr><td>身份证号:</td><td><input validType="idcard" id="txtIdcard" name="idcard" type="text" class="txt03" /></td><td>QQ:</td><td><input validType="QQ" id="txtQq" name="qq" type="text" class="txt03" /></td></tr>
<tr><td>手机:</td><td><input validType="mobile" id="txtMobile" name="mobile" type="text" class="txt03" /></td><td>电话:</td><td><input id="txtTel" name="tel" type="text" class="txt03" /></td></tr>
<tr><td>家庭住址:</td><td colspan="3"><input validType="equalTo[txtMobile]" style="width:80%" id="txtHomeaddr" name="homeaddr" type="text" class="txt03" /></td></tr>
<tr><td>备注:</td><td colspan="3"> <input type="text" style="width:80%" class="txt03" id="txtRemark"></textarea></td></tr>
<tr><td> </td><td colspan="3"><input id="Checkbox1" type="checkbox" /><label>超级管理员</label>  <input id="Checkbox2" type="checkbox" /><label>禁用</label></td></tr> 
</table>

这一段JS 是必不可少的

$(function(){
 $('#uiform input').each(function () {
   if ($(this).attr('required') || $(this).attr('validType'))
    $(this).validatebox();
  })
 });

 这样就ok了 

如果在提交时验证表单有没有通过验证,则可使用下面的代码

var flag = true;

$('#uiform input').each(function () {
 if ($(this).attr('required') || $(this).attr('validType')) {
 if (!$(this).validatebox('isValid')) {
  flag = false;
  return;
 }
 }
})

if (flag)
 alert('验证通过!');
else
 alert('验证失败!');

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

Javascript 相关文章推荐
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
Javascript实现信息滚动效果
May 18 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
简单聊聊TypeScript只读修饰符
Apr 06 Javascript
jQuery EasyUI封装简化操作
Sep 18 #Javascript
基于jQuery ligerUI实现分页样式
Sep 18 #Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 #Javascript
JQuery控制DIV的选取实现方法
Sep 18 #Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 #Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 #Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 #Javascript
You might like
用cookies来跟踪识别用户
2006/10/09 PHP
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
Python采用Django开发自己的博客系统
2020/09/29 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
机械工程及自动化专业求职信
2014/09/03 职场文书
群众路线专项整治方案
2014/10/27 职场文书