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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
jquery获取子节点和父节点的示例代码
Sep 10 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 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
深入密码加salt原理的分析
2013/06/06 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
用js解决数字不能换行问题
2010/08/10 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
Python入门篇之函数
2014/10/20 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
Servlet方面面试题
2016/09/28 面试题
高级文秘工作总结的自我评价
2013/09/28 职场文书
工商管理专业实习生自我鉴定
2013/09/29 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
三方合作协议书范本
2014/04/18 职场文书
计算机专业求职信
2014/06/02 职场文书
小学科学教学计划
2015/01/21 职场文书
领导欢迎词致辞
2015/01/23 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
Python装饰器详细介绍
2022/03/25 Python
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA