jQuery EasyUi 验证功能实例解析


Posted in Javascript onJanuary 06, 2017

 废话不多说了,下面给大家介绍下jquery easyui 验证功能的实例代码。        

{  
          field : 'startPort',  
          title : "起始端口",  
          editor: "text",  
          width : 50,  
          editor: {  
            type: 'SuperValidatebox',  
            options: {  
              required: true,  
              validType: ['integer','length[0,5]']  
            }  
          },

                     自从1.3.2版本开始,validatebox自身已经支持多重校验了,例如: 

input class="easyui-validatebox" data-options="required:true,validType:['email','length[0,20]']">
<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>

自定义验证:

//扩展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: ''  
  }  
})

js

$.extend($.fn.validatebox.defaults.rules, {       
    checkWSDL: {    
      validator: function(value,param){         
         var reg = "^(http://|([0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}:[0-9]{1,4}))[/a-zA-Z0-9._%&:=(),?+]*[?]{1}wsdl$";  
         return reg.test(value);  
      },    
      message: '请输入合法的WSDL地址'    
    },  
    checkIp : {// 验证IP地址  
      validator : function(value) {  
        var reg = /^((1?\d?\d|(2([0-4]\d|5[0-5])))\.){3}(1?\d?\d|(2([0-4]\d|5[0-5])))$/ ;  
        return reg.test(value);  
      },  
      message : 'IP地址格式不正确'  
  }  
});

以上所述是小编给大家介绍的jQuery EasyUi 验证功能实例解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
js文字横向滚动特效
Nov 11 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 Javascript
jQuery编写网页版2048小游戏
Jan 06 #Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 #Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 #Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 #Javascript
使用BootStrap进行轮播图的制作
Jan 06 #Javascript
BootStrap便签页的简单应用
Jan 06 #Javascript
bootstrap table实例详解
Jan 06 #Javascript
You might like
献给php初学者(入门学习经验谈)
2010/10/12 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
Python中的rfind()方法使用详解
2015/05/19 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
分享6个隐藏的python功能
2017/12/07 Python
Python使用gRPC传输协议教程
2018/10/16 Python
Python中的取模运算方法
2018/11/10 Python
基于Python实现用户管理系统
2019/02/26 Python
pandas数据处理进阶详解
2019/10/11 Python
python文件读写代码实例
2019/10/21 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
什么是TCP/IP
2014/07/27 面试题
开业庆典邀请函
2014/01/08 职场文书
上班迟到检讨书
2014/01/10 职场文书
公务员诚信承诺书
2014/05/26 职场文书
2015年度村委会工作总结
2015/04/29 职场文书