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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
jQueryUI的Dialog的简单封装
Jun 07 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
js模糊查询实例分享
Dec 26 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 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
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
php adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
csdn 批量接受好友邀请
2009/02/19 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
vue.js的安装方法
2017/05/12 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
python读取文件名称生成list的方法
2018/04/27 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
Tesserocr库的正确安装方式
2018/10/19 Python
python os模块简单应用示例
2019/05/23 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
创业大赛策划书
2014/03/01 职场文书
就业协议书范本
2014/04/11 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
证婚人致辞精选
2015/07/28 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python