欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery EasyUi 验证功能实例解析

程序员文章站 2023-12-14 11:57:46
 废话不多说了,下面给大家介绍下jquery easyui 验证功能的实例代码。       ...

 废话不多说了,下面给大家介绍下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 验证功能实例解析,希望对大家有所帮助

上一篇:

下一篇: