$.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>