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 06 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
浅析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/09 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
小程序实现密码输入框
2020/11/16 Javascript
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
django的ORM模型的实现原理
2019/03/04 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
C#面试问题
2016/07/29 面试题
揭牌仪式主持词
2014/03/19 职场文书
体育馆的标语
2014/06/24 职场文书
品牌推广活动策划方案
2014/08/19 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
python实现简易名片管理系统
2021/04/11 Python
使用Redis实现实时排行榜功能
2021/07/02 Redis
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js
python实现双向链表原理
2022/05/25 Python
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS