jQuery的Validate外掛怎麼驗證輸入值

這次帶給大家jQuery的Validate外掛怎麼驗證輸入值，jQuery的Validate外掛驗證輸入值的注意事項有哪些，下面就是實戰案例，一起來看一下。

下面小編就為大家分享一篇jQuery Validate外掛ajax方式驗證輸入值的實例，具有很好的參考價值，希望對大家有幫助。一起跟著小編過來看看吧

專案中常常會遇到需要後台驗證問題，例如使用者名稱、使用者帳號是否存在等。使用jQuery Validate外掛程式可以使用remote校驗規則完成驗證。

範例：

一.基本用法

1.需要驗證的表單

    

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

jackson解析json字串時大小寫自動轉換的方法

ajax請求後台資料成功後無反映應該如何處理

jQuery EasyUI 折疊面板的使用

##jQuery EasyUI選項卡面板的tabs使用

以上是jQuery的Validate外掛怎麼驗證輸入值的詳細內容。更多資訊請關注PHP中文網其他相關文章！