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 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
拖动时防止选中
Feb 03 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
使用socket.io实现简单聊天室案例
Jan 02 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
JS前端轻量fabric.js系列物体基类
Aug 05 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
ThinkPHP表单自动验证实例
2014/10/13 PHP
php实现异步数据调用的方法
2015/12/24 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
微信小程序实现留言功能
2018/10/31 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
django中间键重定向实例方法
2019/11/10 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
巴西在线鞋店:Shoestock
2017/10/28 全球购物
优秀民警事迹材料
2014/01/29 职场文书
销售冠军获奖感言
2014/02/03 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
小学班级口号
2014/06/09 职场文书
离职证明格式样本
2015/06/12 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python