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 相关文章推荐
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
js实现自动锁屏功能
Jun 02 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
PHP编码转换
2012/11/05 PHP
基于php验证码函数的使用示例
2013/05/03 PHP
php 发送带附件邮件示例
2014/01/23 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
python装饰器使用方法实例
2013/11/21 Python
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
Django 自定义分页器的实现代码
2019/11/24 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
Python csv文件记录流程代码解析
2020/07/16 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
公司前台接待岗位职责
2013/12/03 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
个人担保书范文
2014/05/20 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书