$.extend($.fn.validatebox.defaults.rules, {
//用户账号验证(只能包括 _ 数字 字母)
account: {
validator: function (value) {
if (value.length <= 1) {
$.fn.validatebox.defaults.rules.account.message = '账号长度必须大于1';
return false;
} else {
if (!/^[\w]+$/.test(value)) {
$.fn.validatebox.defaults.rules.account.message = '账号只能数字、字母、下划线组成.';
return false;
} else {
return true;
}
}
}, message: ''
},
//密码验证
password: {
validator: function (value) {
if (value.length <= 6) {
$.fn.validatebox.defaults.rules.password.message = '密码长度必须大于6';
return false;
} else {
return true;
}
}, message: ''
}
});
How to use it ?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery easyUI textbox</title>
<link rel="stylesheet" type="text/css" href="themes/bootstrap/easyui.css" />
<link rel="stylesheet" type="text/css" href="themes/icon.css" />
<link href="themes/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.easyui.min.js"></script>
<script type="text/javascript" src="Scripts/easyui-lang-zh_CN.js"></script>
</head>
<body>
<div style="width: 400px; margin: 100px auto;">
<div class="easyui-panel" title="Login to system" style="width: 400px; padding: 30px 70px 20px 70px">
<div style="margin-bottom: 10px">
<input class="easyui-textbox" style="width: 100%; height: 40px; padding: 12px" data-options="prompt:'Username',validType:'account',iconCls:'icon-man',iconWidth:38" />
</div>
<div style="margin-bottom: 20px">
<input class="easyui-textbox" type="password" style="width: 100%; height: 40px; padding: 12px" data-options="prompt:'Password',validType:'password',iconCls:'icon-lock',iconWidth:38" />
</div>
<div>
<a href="#" class="easyui-linkbutton" style="padding: 5px 0px; width: 100%;">
<span style="font-size: 14px;">登录</span>
</a>
</div>
</div>
</div>
</body>
</html>