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 相关文章推荐
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
Position属性之relative用法
Dec 14 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
轮播图组件js代码
Aug 08 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
three.js加载obj模型的实例代码
Nov 10 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 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对数组排序代码分享
2014/02/24 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python每次处理固定个数的字符的方法总结
2013/01/29 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
python对一个数向上取整的实例方法
2020/06/18 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
介绍一下MD5加密算法
2016/11/12 面试题
2015年学校团委工作总结
2015/05/26 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技