Jquery.validator 是一款非常實用的前端表單驗證插件。通過 Jquery.validator，我們可以很方便地對用戶輸入的表單數據進行驗證并返回驗證結果。這個插件不僅非常方便易用，而且還提供了非常豐富的配置選項，可以滿足我們對于表單驗證的各種需求。

今天，我們將使用 Jquery.validator 來實現一個修改密碼的功能。我們需要驗證用戶輸入的舊密碼和新密碼是否符合要求。舊密碼必須正確，新密碼必須符合一定的規則。

下面，我們來看一下如何使用 Jquery.validator 來實現這個功能:

$("#change-password-form").validate({
rules: {
oldPassword: {
required: true,
remote: {
url: "/checkOldPassword",
type: "post",
data: {
oldPassword: function() {
return $("#oldPassword").val();
}
}
}
},
newPassword: {
required: true,
minlength: 6
},
confirmPassword: {
required: true,
equalTo: "#newPassword"
}
},
messages: {
oldPassword: {
required: "請輸入舊密碼",
remote: "舊密碼不正確，請重新輸入"
},
newPassword: {
required: "請輸入新密碼",
minlength: "新密碼長度不能少于6位"
},
confirmPassword: {
required: "請再次輸入新密碼",
equalTo: "兩次輸入的密碼不一致，請重新輸入"
}
},
submitHandler:function(){
// 使用 AJAX 提交表單
$.post("/changePassword",$("#change-password-form").serialize(),function(data){
if (data.success) {
alert("密碼修改成功！");
} else {
alert("密碼修改失?。? + data.msg);
}
});
}
});

在這個例子中，我們使用了 Jquery.validator 的一些非常常用的選項和方法:

• rules: 通過 rules 來定義各個表單元素的驗證規則，例如：必填、長度限制等等。
• remote: 通過 remote 來定義使用 AJAX 請求服務器來檢查舊密碼是否正確。
• messages: 通過 messages 來定義各個表單元素的錯誤提示信息。
• submitHandler: 通過 submitHandler 來定義表單提交事件，例如：使用 AJAX 提交表單并處理返回結果。

總結起來，通過 Jquery.validator，我們可以非常方便地實現各種表單驗證的功能，包括常見的必填、長度限制等驗證規則，以及 AJAX 請求服務器的驗證等高級功能。