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实现一个页面多个css样式实现
May 29 Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
jquery实用技巧之输入框提示语句
Jul 28 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
es6函数之rest参数用法实例分析
Apr 18 Javascript
详解Vue之事件处理
Jul 10 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
phpwind中的数据库操作类
2007/01/02 PHP
php生成zip文件类实例
2015/04/07 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
2017/11/08 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
Javascript的闭包
2009/12/31 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
Python 装饰器使用详解
2017/07/29 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
Python bytes string相互转换过程解析
2020/03/05 Python
python小白切忌乱用表达式
2020/05/29 Python
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
白酒业务员岗位职责
2013/12/27 职场文书
七年级数学教学反思
2014/01/22 职场文书
2014年党课学习材料
2014/05/11 职场文书
远程培训的心得体会
2014/09/01 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
Golang的继承模拟实例
2021/06/30 Golang
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js