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 表单验证大全
Nov 23 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
vue组件系列之TagsInput详解
May 14 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 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 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
python绘制规则网络图形实例
2019/12/09 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
校运会广播稿100字
2014/01/27 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
逃课上网检讨书
2014/02/20 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
中学生家长评语大全
2014/04/16 职场文书
敬老院标语
2014/06/27 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
酒店宣传语大全
2015/07/13 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书