1、引入JQuery插件（依賴JQuery）

<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js" type="text/javascript"></script>

2、定義校驗規則

鍵是標簽的名字

$(function () {
	$("#myform").validate({
		rules:{
			"username":{"required":true,"checkUsername":true},	<!--自定義校驗-->
			"password":{"required":true,"rangelength":[6,12]},
			"repassword":{"required":true,"rangelength":[6,12],"equalTo":"#password"},	<!--尋找id=password的標簽，進行內容對比-->
			"email":{"required":true,"email":true},
			"sex":{"required":true},
			"birthday":{"required":true,"date":true},
			"checkCode":{"required":true}
		},
		messages:{
			"username":{"required":"用戶名不能為空","checkUsername":"用戶名已存在"},
			"password":{"required":"密碼不能為空","rangelength":"密碼長度6-12位"},
			"repassword":{"required":"密碼不能為空","rangelength":"密碼長度6-12位","equalTo":"兩次密碼輸入不一致"},
			"email":{"required":"郵箱不能為空","email":"郵箱格式不正確"},
			"birthday":{"required":"出生日期不能為空","date":"請輸入正確的日期格式"},
			"checkCode":{"required":"請輸入驗證碼"}
		}
	})
})

3、定義錯誤標簽樣式

插件會自動尋找第一個匹配name=“xxx”的標簽，在它後面添加一個錯誤標簽（class="error"）

所以單選框會出現錯誤，所以要在你想要在的位置加上如下代碼：

<label class="error" for="sex" style="display: none">性別不能為空</label>

4、自定義校驗規則

$.validator.addMethod(
	"checkUsername",

	function (value,element,params) {
		//value:輸入的內容
        //element:被校驗的元素對象
        //params：規則對應的參數值
        //目的：對輸入的username進行ajax校驗
		var flag = false;

		$.ajax({
			"async":false,	<!--是否異步-->
			"data":{"username":value},
			"dataType":"json",
			"type":"POST",
			"url":"${pageContext.request.contextPath}/checkUsername",
			"success":function (dat) {
				flag=dat.isExist;
			}

		});

		//返回false代表該校驗器不通過
		return !flag;
	}
);

前端——JQuery表單驗證插件