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 相关文章推荐
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 Javascript
jquery实现数字输入框
Feb 22 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
详解用JS添加和删除class类名
Mar 25 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
js实现多个标题吸顶效果
Jan 08 Javascript
js实现带箭头的进度流程
Mar 26 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
一个用于MySQL的PHP XML类
2006/10/09 PHP
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
详解原生js实现offset方法
2017/06/15 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
对于Python的框架中一些会话程序的管理
2015/04/20 Python
Python中super函数的用法
2017/11/17 Python
python中字符串内置函数的用法总结
2018/09/13 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
学校消防安全制度
2014/01/30 职场文书
党风廉政承诺书
2014/03/27 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
反邪教教育心得体会
2016/01/15 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python