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动态增减控件的一些想法和小插件
Aug 01 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
JavaScript中两个字符串的匹配
Jun 08 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
实例解析Array和String方法
Dec 14 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
详解vue引入子组件方法
Feb 12 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类
2006/11/27 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
Python open读写文件实现脚本
2008/09/06 Python
python分析nignx访问日志脚本分享
2015/02/26 Python
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
python爬取网易云音乐评论
2018/11/16 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
Python logging设置和logger解析
2019/08/28 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
python之随机数函数的实现示例
2020/12/30 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
C#笔试题
2015/07/14 面试题
给导游的表扬信
2014/01/10 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
学校交通安全责任书
2014/08/25 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
证券区域经理岗位职责
2015/04/10 职场文书