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 相关文章推荐
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
nuxt.js 缓存实践
Jun 25 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 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
全文搜索和替换
2006/10/09 PHP
source.php查看源文件
2006/12/09 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
php日期操作技巧小结
2016/06/25 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
IE无法设置短域名下Cookie
2010/09/23 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
编程语言Python的发展史
2014/09/26 Python
使用Python解析JSON数据的基本方法
2015/10/15 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
详解Python 中的容器 collections
2020/08/17 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
JDO的含义
2012/11/17 面试题
环保建议书作文400字
2015/09/14 职场文书
vue实现移动端div拖动效果
2022/03/03 Vue.js
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技