easyui validatebox验证


Posted in Javascript onApril 29, 2016
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <script src="easyui1.2.4/jquery-1.6.min.js" type="text/javascript"></script>
 <script src="easyui1.2.4/jquery.easyui.min.js" type="text/javascript"></script>
 <!--自定义验证-->
 <script src="easyui1.2.4/validator.js" type="text/javascript"></script>
 <link href="easyui1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
 <script>
 
  $(function () {
    
   //设置text需要验证
   $('input[type=text]').validatebox();
  })
  
 </script>
</head>
<body>
 邮箱验证:<input type="text" validtype="email" required="true" missingMessage="不能为空" invalidMessage="邮箱格式不正确" /><br />
 网址验证:<input type="text" validtype="url" invalidMessage="url格式不正确[http://www.example.com]" /><br />
 长度验证:<input type="text" validtype="length[8,20]" invalidMessage="有效长度8-20" /><br />
 手机验证:<input type="text" validtype="mobile" /><br />
 邮编验证:<input type="text" validtype="zipcode" /><br />
 账号验证:<input type="text" validtype="account[8,20]" /><br />
 汉字验证:<input type="text" validtype="CHS" /><br />
 远程验证:<input type="text" validtype="remote['checkname.aspx','name']" invalidMessage="用户名已存在"/>
</body>
</html>
//自定义validator.js
//扩展easyui表单的验证
$.extend($.fn.validatebox.defaults.rules, {
 //验证汉字
 CHS: {
  validator: function (value) {
   return /^[\u0391-\uFFE5]+$/.test(value);
  },
  message: '只能输入汉字'
 },
 //移动手机号码验证
 mobile: {//value值为文本框中的值
  validator: function (value) {
   var reg = /^1[3|4|5|8|9]\d{9}$/;
   return reg.test(value);
  },
  message: '输入手机号码格式不准确.'
 },
 //国内邮编验证
 zipcode: {
  validator: function (value) {
   var reg = /^[1-9]\d{5}$/;
   return reg.test(value);
  },
  message: '邮编必须是非0开始的6位数字.'
 },
 //用户账号验证(只能包括 _ 数字 字母) 
 account: {//param的值为[]中值
  validator: function (value, param) {
   if (value.length < param[0] || value.length > param[1]) {
    $.fn.validatebox.defaults.rules.account.message = '用户名长度必须在' + param[0] + '至' + param[1] + '范围';
    return false;
   } else {
    if (!/^[\w]+$/.test(value)) {
     $.fn.validatebox.defaults.rules.account.message = '用户名只能数字、字母、下划线组成.';
     return false;
    } else {
     return true;
    }
   }
  }, message: ''
 }
})
Javascript 相关文章推荐
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
Js的Array数组对象详解
Feb 22 Javascript
Node.js的特点详解
Feb 03 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
javascript canvas时钟模拟器
Jul 13 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 #Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 #Javascript
Bootstrap模态对话框的简单使用
Apr 29 #Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 #Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 #Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 #Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 #Javascript
You might like
PHP 和 HTML
2006/10/09 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
Javascript开发包大全整理
2006/12/22 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
python 处理dataframe中的时间字段方法
2018/04/10 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
python PIL模块的基本使用
2020/09/29 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
《再见了,亲人》教学反思
2014/02/26 职场文书
教师评语大全
2014/04/28 职场文书
篮球比赛策划方案
2014/06/05 职场文书
环卫工作个人总结
2015/03/04 职场文书
同事欢送会致辞
2015/07/31 职场文书
公司保洁员管理制度
2015/08/04 职场文书
党员读书活动心得体会
2016/01/14 职场文书