jquery.validate.js

時間 2019-11-17

標籤 jquery.validate.js jquery validate 欄目 JQuery 简体版

原文原文鏈接

1、源碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />

		<title>jquery.validate.js ajax請求form表單驗證</title>
<style type="text/css">
#validate_error_message {
	color:#FF5353;
}
</style>
	</head>

	<body>


			<form id="validate">
				<div>
					<input type="text" name="age" id="age"/>
				</div>

				<div id="validate_error_message"></div>

				<div class="btn-group">
					<button type="submit" class="btn btn-primary">提交</button>
				</div>
			</form>

		<script src="vendor/jquery-1.9.0.min.js"></script>

		<script src="../jquery.validate.js"></script>

		<script>

			jQuery.extend(jQuery.validator.messages, {
			        required: "必選字段",
					remote: "請修正該字段",
					email: "請輸入正確格式的電子郵件",
					url: "請輸入合法的網址",
					date: "請輸入合法的日期",
					dateISO: "請輸入合法的日期 (ISO).",
					number: "請輸入合法的數字",
					digits: "只能輸入整數",
					creditcard: "請輸入合法的信用卡號",
					equalTo: "請再次輸入相同的值",
					accept: "請輸入擁有合法後綴名的字符串",
					maxlength: jQuery.validator.format("請輸入一個長度最可能是 {0} 的字符串"),
					minlength: jQuery.validator.format("請輸入一個長度最少是 {0} 的字符串"),
					rangelength: jQuery.validator.format("請輸入一個長度介於 {0} 和 {1} 之間的字符串"),
					range: jQuery.validator.format("請輸入一個介於 {0} 和 {1} 之間的值"),
					max: jQuery.validator.format("請輸入一個最大爲 {0} 的值"),
					min: jQuery.validator.format("請輸入一個最小爲 {0} 的值")
			});

//覆蓋validator.defaults中的一些屬性，jquery extend高級用法
jQuery.extend(jQuery.validator.defaults, {
    errorElement: "label"
});


			var validateRoles = {


			rules : {
				age : {
					required : true,
					maxlength : 60
				}

			},
			messages : {
				age: "提示信息我想放哪裏就放哪裏,提示信息樣式也由我本身控制"
			},
			errorPlacement: function (error, element) {
				console.log("css能夠本身控制")
				error.appendTo($("#validate_error_message") ); //這裏的element是錄入數據的對象
			}
	};
	
		$("#validate").validate(validateRoles);
		$(".btn-primary").bind("click", function() {
			var submitForm = $("#validate");
			console.log("dd")
			if (submitForm.valid() == false) {
				 console.log("ajaxform表單驗證就那麼神奇地發生了");
				return false;
			}else {
				return false;
			}

		});
		</script>
	</body>
</html>

2、jquery.extend用法

如上代碼中自定義錯誤信息地方，樣式定都是經過jquery.extend實現，Jquery的擴展方法extend是咱們在寫插件或者使用插件的過程當中經常使用的方法，因爲擴展插件中的方法或者屬性或者覆蓋插件中的方法或者屬性。javascript

3、ajax form表單請求的驗證進行支持

經過valid()方法實現css

valid: function() {
		var valid, validator, errorList;

		if ( $( this[ 0 ] ).is( "form" ) ) {
			valid = this.validate().form();
		} else {
			errorList = [];
			valid = true;
			validator = $( this[ 0 ].form ).validate();
			this.each( function() {
				valid = validator.element( this ) && valid;
				if ( !valid ) {
					errorList = errorList.concat( validator.errorList );
				}
			} );
			validator.errorList = errorList;
		}
		return valid;
	}

4、自定義錯誤包裹的標籤

//覆蓋validator.defaults中的一些屬性，jquery extend高級用法
jQuery.extend(jQuery.validator.defaults, {
    errorElement: "label"
});

5、驗證默認信息中文轉換

jQuery.extend(jQuery.validator.messages, {
			        required: "必選字段",
					remote: "請修正該字段",
					email: "請輸入正確格式的電子郵件",
					url: "請輸入合法的網址",
					date: "請輸入合法的日期",
					dateISO: "請輸入合法的日期 (ISO).",
					number: "請輸入合法的數字",
					digits: "只能輸入整數",
					creditcard: "請輸入合法的信用卡號",
					equalTo: "請再次輸入相同的值",
					accept: "請輸入擁有合法後綴名的字符串",
					maxlength: jQuery.validator.format("請輸入一個長度最可能是 {0} 的字符串"),
					minlength: jQuery.validator.format("請輸入一個長度最少是 {0} 的字符串"),
					rangelength: jQuery.validator.format("請輸入一個長度介於 {0} 和 {1} 之間的字符串"),
					range: jQuery.validator.format("請輸入一個介於 {0} 和 {1} 之間的值"),
					max: jQuery.validator.format("請輸入一個最大爲 {0} 的值"),
					min: jQuery.validator.format("請輸入一個最小爲 {0} 的值")
			});

6、自定義錯誤信息提示的位置

errorPlacement: function (error, element) {
				console.log("css能夠本身控制")
				error.appendTo($("#validate_error_message") ); //這裏的element是錄入數據的對象
			}

7、自定義錯誤信息樣式

#validate_error_message {
	color:#FF5353;
}

8、只驗證不提交表單

debug: true

9、api文檔

http://www.runoob.com/jquery/jquery-plugin-validate.htmlhtml

10、聚焦錯誤地方

errorPlacement: function (error, element) {
				element.focus();
				error.appendTo($(".error_box")); //這裏的element是錄入數據的對象
			}

11、每次只顯示一個錯誤

errorPlacement: function (error, element) {
				var errMessage = $(".error_box").text();
				//每次只顯示一個錯誤
				if (common.isEmpty(errMessage)) {
					element[0].focus();
					error.appendTo($(".error_box")); //這裏的element是錄入數據的對象
				}
			}

12、檢查隱藏域hidden

爲何要檢查域呢？有時候咱們項目中會使用一些自定義的下拉複選框等，這些一般須要經過自定義驗證規則來實現，這時候咱們可能須要經過hidden來定製規則。jquery.validate.js在1.9之後默認關閉了對hidden隱藏域的檢查。java

//覆蓋validator.defaults中的一些屬性，jquery extend高級用法
	jQuery.extend(jQuery.validator.defaults, {
		errorElement: "label",
		ignore: ""//檢查隱藏域忽略
	});

十3、添加自定義驗證

// 添加自定義驗證,驗證下拉,將自定義下拉的驗證借掛在其餘輸入框,經過attr關聯
	jQuery.validator.addMethod("zcode_selected", function (value, element) {
		var $element = $(element);//dom對象轉爲jquery對象
		var selectedId =  $element.attr("selectedId");
		value = $("#" + selectedId).find("i").attr("current-data-val") || "-1";
		var flag =  value !== "-1";
		if (flag === false) {
			setTimeout(function () {
				$(".error_box").text("");
			}, 3000);
		}
		return flag;
	}, "下拉不容許爲空");

相關標籤/搜索

jquery.validate.js

jquery.validate.js+jquery.validate.unobtrusive.js

JavaScript

JQuery

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。