首页 > 编程 > JavaScript > 正文

jQuery EasyUi 验证功能实例解析

2019-11-19 18:06:15
字体:
来源:转载
供稿:网友

 废话不多说了,下面给大家介绍下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 验证功能实例解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表