提供的校驗規則:
1、非空校驗required="required"
2、使用validType指定
email: 正則表達式匹配電子郵件規則。
url: 正則表達式匹配的URL規則。
length[0,100]: 在x和x字符允許。
remote['http://.../action.do','paramName']: 發送ajax請求做驗證值,返回“true”當成功。
使用前記住添加中文解析。
密碼校驗:length[4,6] 長度4-6, required="true" 必填,
<div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
<form id="editPasswordForm">
<table cellpadding=3>
<tr>
<td>新密碼:</td>
<td><input required="true" data-options="validType:'length[4,6]'" id="txtNewPass" type="Password" class="txt01 easyui-validatebox" /></td>
</tr>
<tr>
<td>確認密碼:</td>
<td><input required="true" data-options="validType:'length[4,6]'" id="txtRePass" type="Password" class="txt01 easyui-validatebox" /></td>
</tr>
</table>
</form>
</div>
<div region="south" border="false" style="text-align: right; height: 30px; line-height: 30px;">
<a id="btnEp" class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)" >確定</a>
<a id="btnCancel" class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)">取消</a>
</div>
提交密碼校驗:上面只是提示,並不能阻止頁面提交發送ajax請求。
//爲確定按鈕綁定事件
$("#btnEp").click(function(){
//進行表單校驗
var v = $("#editPasswordForm").form("validate");
if(v){
//表單校驗通過,手動校驗兩次輸入是否一致
var v1 = $("#txtNewPass").val();
var v2 = $("#txtRePass").val();
if(v1 == v2){
//兩次輸入一致,發送ajax請求
$.post("userAction_editPassword.action",{"password":v1},function(data){
if(data == '1'){
//修改成功,關閉修改密碼窗口
$("#editPwdWindow").window("close");
}else{
//修改密碼失敗,彈出提示
$.messager.alert("提示信息","密碼修改失敗!","error");
}
});
}else{
//兩次輸入不一致,彈出錯誤提示
$.messager.alert("提示信息","兩次密碼輸入不一致!","warning");
}
}
});
自定義校驗規則:
舉例校驗手機號碼
<script type="text/javascript">
$(function(){
var reg = /^1[3|4|5|7|8][0-9]{9}$/;
//擴展手機號校驗規則
$.extend($.fn.validatebox.defaults.rules, {
telephone: {
validator: function(value,param){
return reg.test(value);
},
message: '手機號輸入有誤!'
}
});
});
</script>
手機號輸入框應用規則
爲保存按鈕綁定事件,提交表單
//爲保存按鈕綁定事件
$("#save").click(function(){
//表單校驗,如果通過,提交表單
var v = $("#addStaffForm").form("validate");
if(v){
$("#addStaffForm").submit();
}
});