小編給大家分享一下jQuery中Validate插件ajax方式驗(yàn)證輸入值的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)主營(yíng)襄汾網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app軟件開發(fā)公司,襄汾h5微信小程序定制開發(fā)搭建,襄汾網(wǎng)站營(yíng)銷推廣歡迎襄汾等地區(qū)企業(yè)咨詢

使用jQuery Validate插件可以使用remote校驗(yàn)規(guī)則完成驗(yàn)證。

示例：

一.基本用法

1.需要驗(yàn)證的表單

<form id="registForm"> 
 <input type="text" id="username" name="username"> 
</form>

2.js

使用remote校驗(yàn)規(guī)則，最簡(jiǎn)單粗暴的寫法是remote: url，此時(shí)請(qǐng)求的url后面自動(dòng)拼接當(dāng)前驗(yàn)證的值，例如下面的寫法，請(qǐng)求的url為：xxx/checkUsername.do?username=test

// 導(dǎo)入jquery、validte庫略
$(function() {
	$.validator.setDefaults({
		submitHandler: function(form) {
			// 驗(yàn)證通過處理
			...
		}
	});
				
	$("#registForm").validate({
		rules: {
			username: {
				required: true,
				remote: "checkUsername.do"
			},			
		},
		messages: {
			username: {
				required: "用戶名不能為空",
				remote: "用戶名已經(jīng)存在"
			}
		}
	});
});

3.后臺(tái)（Spring MVC測(cè)試）

后臺(tái)響應(yīng)只能輸出true或false，不能有其他數(shù)據(jù)，true：驗(yàn)證通過，false：驗(yàn)證失敗；設(shè)置返回類型為boolean或String都可以

(1).返回boolean

@RequestMapping("/checkUsername")
public @ResponseBody boolean checkUsername(@RequestParam String username) {
	// 測(cè)試
	return !"test".equals(username);
}

(2).返回String

@RequestMapping("/checkUsername")
public @ResponseBody String checkUsername(@RequestParam String username) {
	// 測(cè)試
	return !"test".equals(username) ? "true" : "false";
}

二.其他用法

上面的用法不能滿足實(shí)際的需求，有時(shí)候會(huì)有需要提交其他參數(shù)、參數(shù)名和屬性名不一致或請(qǐng)求方式為POST的情況，寫法如下：

1.js

使用data選項(xiàng)，也就是jQuery的$.ajax({...})的寫法；

提交的數(shù)據(jù)需要通過函數(shù)返回值的方式，直接寫值有問題；

默認(rèn)會(huì)提交當(dāng)前驗(yàn)證的值，也就是下例中的 username: xxx會(huì)被默認(rèn)作為參數(shù)提交

....
username: {
	required: true,
	remote: {
		url: "checkUsername.do",
		type: "post",    //數(shù)據(jù)發(fā)送方式
		dataType: "json",   //接受數(shù)據(jù)格式 
		data: {      //要傳遞的數(shù)據(jù)
			username: function() {
				return $("#username").val();
			},
			extra: function() {
				return "額外信息";
			}
		 }
	}
}

2.后臺(tái)

限制了必須為POST方式請(qǐng)求

@RequestMapping(value = "/checkUsername", method = RequestMethod.POST)
public @ResponseBody boolean checkUsername(User user, @RequestParam String extra) {
	// 測(cè)試
	System.out.println(extra);
	return !"test".equals(user.getUsername());
}

以上是“jQuery中Validate插件ajax方式驗(yàn)證輸入值的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁標(biāo)題：jQuery中Validate插件ajax方式驗(yàn)證輸入值的示例分析
本文來源：http://chinadenli.net/article26/jijscg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、定制開發(fā)、標(biāo)簽優(yōu)化、搜索引擎優(yōu)化、Google、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)