下面我就為大家分享一篇jQuery Validate插件ajax方式驗證輸入值的實例，具有很好的參考價值，希望對大家有幫助。
專案中常會遇到需要後台驗證問題，例如使用者名稱、使用者帳號是否存在等。使用jQuery Validate外掛程式可以使用remote校驗規則完成驗證。
範例：
一.基本用法
1.需要驗證的表單
<form id="registForm"> <input type="text" id="username" name="username"> </form>
2.js
使用remote校驗規則，最簡單粗暴的寫法是remote: url，此時請求的url後面自動拼接目前驗證的值，例如下面的寫法，請求的url為：xxx/checkUsername.do?username=test
// 导入jquery、validte库略
$(function() {
$.validator.setDefaults({
submitHandler: function(form) {
// 验证通过处理
...
}
});
$("#registForm").validate({
rules: {
username: {
required: true,
remote: "checkUsername.do"
},
},
messages: {
username: {
required: "用户名不能为空",
remote: "用户名已经存在"
}
}
});
});3.後台（Spring MVC測試）
#後台回應只能輸出true或false，不能有其他數據，true：驗證通過，false：驗證失敗；設定回傳類型為boolean或String都可以
(1).回傳boolean
@RequestMapping("/checkUsername")
public @ResponseBody boolean checkUsername(@RequestParam String username) {
// 测试
return !"test".equals(username);
}(2).返回String
@RequestMapping("/checkUsername")
public @ResponseBody String checkUsername(@RequestParam String username) {
// 测试
return !"test".equals(username) ? "true" : "false";
}二.其他用法
上面的用法不能滿足實際的需求，有時會有需要提交其他參數、參數名稱和屬性名不一致或請求方式為POST的情況，寫法如下：
#1.js
##使用data選項，也就是jQuery的$.ajax({...})的寫法；提交的資料需要透過函數傳回值的方式，直接寫值有問題；預設會提交目前驗證的值，也就是下例中的username: xxx會被預設為參數提交....
username: {
required: true,
remote: {
url: "checkUsername.do",
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
username: function() {
return $("#username").val();
},
extra: function() {
return "额外信息";
}
}
}
}2.後台
限制了必須為POST方式請求@RequestMapping(value = "/checkUsername", method = RequestMethod.POST)
public @ResponseBody boolean checkUsername(User user, @RequestParam String extra) {
// 测试
System.out.println(extra);
return !"test".equals(user.getUsername());
}有關使用bootstrap-table.js實作擴充分頁工具列功能
以上是在jQuery中如何使用Validate插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
