jQuery EasyUi 验证功能实例解析
废话不多说了，下面给大家介绍下jqueryeasyui验证功能的实例代码。
{
field:'startPort',
title:"起始端口",
editor:"text",
width:50,
editor:{
type:'SuperValidatebox',
options:{
required:true,
validType:['integer','length[0,5]']
}
},
自从1.3.2版本开始，validatebox自身已经支持多重校验了，例如：
inputclass="easyui-validatebox"data-options="required:true,validType:['email','length[0,20]']">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<scriptsrc="easyui1.2.4/jquery-1.6.min.js"type="text/javascript"></script>
<scriptsrc="easyui1.2.4/jquery.easyui.min.js"type="text/javascript"></script>
<!--自定义验证-->
<scriptsrc="easyui1.2.4/validator.js"type="text/javascript"></script>
<linkhref="easyui1.2.4/themes/default/easyui.css"rel="stylesheet"type="text/css"/>
<script>
$(function(){
//设置text需要验证
$('input[type=text]').validatebox();
})
</script>
</head>
<body>
邮箱验证：<inputtype="text"validtype="email"required="true"missingMessage="不能为空"invalidMessage="邮箱格式不正确"/><br/>
网址验证：<inputtype="text"validtype="url"invalidMessage="url格式不正确[http://www.example.com]"/><br/>
长度验证：<inputtype="text"validtype="length[8,20]"invalidMessage="有效长度8-20"/><br/>
手机验证：<inputtype="text"validtype="mobile"/><br/>
邮编验证：<inputtype="text"validtype="zipcode"/><br/>
账号验证：<inputtype="text"validtype="account[8,20]"/><br/>
汉子验证：<inputtype="text"validtype="CHS"/><br/>
远程验证：<inputtype="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){
varreg=/^1[3|4|5|8|9]\d{9}$/;
returnreg.test(value);
},
message:'输入手机号码格式不准确.'
},
//国内邮编验证
zipcode:{
validator:function(value){
varreg=/^[1-9]\d{5}$/;
returnreg.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]+'范围';
returnfalse;
}else{
if(!/^[\w]+$/.test(value)){
$.fn.validatebox.defaults.rules.account.message='用户名只能数字、字母、下划线组成.';
returnfalse;
}else{
returntrue;
}
}
},message:''
}
})
js
$.extend($.fn.validatebox.defaults.rules,{
checkWSDL:{
validator:function(value,param){
varreg="^(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$";
returnreg.test(value);
},
message:'请输入合法的WSDL地址'
},
checkIp:{//验证IP地址
validator:function(value){
varreg=/^((1?\d?\d|(2([0-4]\d|5[0-5])))\.){3}(1?\d?\d|(2([0-4]\d|5[0-5])))$/;
returnreg.test(value);
},
message:'IP地址格式不正确'
}
});
以上所述是小编给大家介绍的jQueryEasyUi验证功能实例解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！