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 相关文章推荐
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
详解React之key的使用和实践
Sep 29 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 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写入、删除与复制文件的方法
2015/06/20 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
基于jquery的模态div层弹出效果
2010/08/21 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
JS跨域代码片段
2012/08/30 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
PHP7新特性简述
2017/06/11 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
python实现简单socket通信的方法
2016/04/19 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
Django之PopUp的具体实现方法
2019/08/31 Python
python编写微信公众号首图思路详解
2019/12/13 Python
Python 如何查找特定类型文件
2020/08/17 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
企事业单位求职者的自我评价
2013/12/28 职场文书
工业自动化毕业生自荐信范文
2014/01/04 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
个人作风建设总结
2014/10/23 职场文书
2015年新农合工作总结
2015/03/30 职场文书
pandas中对文本类型数据的处理小结
2021/11/01 Python
Django框架中视图的用法
2022/06/10 Python