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 相关文章推荐
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
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获取字段名示例分享
2014/03/03 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
Python3安装Scrapy的方法步骤
2017/11/23 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
python实现Zabbix-API监控
2018/09/17 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
python怎么判断模块安装完成
2020/06/19 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
2014迎国庆标语大全
2014/09/19 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
2015双创工作总结
2015/07/24 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python
muduo TcpServer模块源码分析
2022/04/26 Redis