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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
用jQuery获取table中行id和td值的实现代码
May 19 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 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
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
Vuex的actions属性的具体使用
2019/04/14 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
python K近邻算法的kd树实现
2018/09/06 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
财务管理专业毕业生求职信范文
2013/09/21 职场文书
服务质量承诺书
2014/03/27 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
产品委托授权书范本
2014/09/16 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL