validatebox頁面輸入校驗

提供的校驗規則：

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();
	      }
	});