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 相关文章推荐
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
ajax 文件上传应用简单实现
Mar 03 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
js自定义input文件上传样式
Oct 26 Javascript
js字符串倒序的实例代码
Nov 30 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 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和ACCESS写聊天室(九)
2006/10/09 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
Python中random模块生成随机数详解
2016/03/10 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
瑞典度假品牌:OAS
2019/05/28 全球购物
大学生实习思想汇报
2014/01/12 职场文书
仓库主管岗位职责
2014/03/02 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
淘宝客服工作职责
2014/07/11 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
先进个人推荐材料
2014/12/29 职场文书
MySQL触发器的使用
2021/05/24 MySQL