jquery validate.js表單驗證的基本用法入門

原創

2020-02-21 00:21

<script type="text/javascript"
			src="<%=basePath%>/common/script/jquery/jquery-1.7.min.js"></script>
 <script src="<%=basePath %>/common/script/jqvalidation/jquery.validate.js" type="text/javascript"></script>
<link href="<%=basePath%>/css/admin.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript">
  $(document).ready(function(){
   
  $.validator.addMethod(
	"formula", //驗證方法名稱
	function(value, element, param) {//驗證規則
		var oEditor = FCKeditorAPI.GetInstance("content").GetXHTML(true); //對fck的內容進行驗證	
		var flag = oEditor!="";
		return flag;
	}, 
	'請輸入內容'//驗證提示信息
	);
	$("#addNewsForm").validate({
		rules: {
			title: {
				required: true,
				minlength: 2
			},
			clicks: {
				digits:true 
			},
			column1:{
				required:true
			},
			content:{
			formula:true
			}
		},
		
		messages: {
			title: {
				required: '請輸入標題',
				minlength: '請至少輸入兩個字符'
			},clicks: {
				digits:'請輸入整數'
			},column1:{
				required:'請選擇欄目'
			},content:{
			formula:'請輸入內容'
			}
		},	
		
		errorElement: "em",				//用來創建錯誤提示信息標籤
		success: function(label) {			//驗證成功後的執行的回調函數
			//label指向上面那個錯誤提示信息標籤em
			label.text(" ")				//清空錯誤提示消息
				.addClass("success");	//加上自定義的success類
		}
	  });
  });
	</script>

默認校驗規則
(1)required:true 必輸字段
(2)remote:"check.php" 使用ajax方法調用check.php驗證輸入值
(3)email:true 必須輸入正確格式的電子郵件
(4)url:true 必須輸入正確格式的網址
(5)date:true 必須輸入正確格式的日期
(6)dateISO:true 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性
(7)number:true 必須輸入合法的數字(負數，小數)
(8)digits:true 必須輸入整數
(9)creditcard: 必須輸入合法的信用卡號
(10)equalTo:"#field" 輸入值必須和#field相同
(11)accept: 輸入擁有合法後綴名的字符串（上傳文件的後綴）
(12)maxlength:5 輸入長度最多是5的字符串(漢字算一個字符)
(13)minlength:10 輸入長度最小是10的字符串(漢字算一個字符)
(14)rangelength:[5,10] 輸入長度必須介於 5 和 10 之間的字符串")(漢字算一個字符)
(15)range:[5,10] 輸入值必須介於 5 和 10 之間
(16)max:5 輸入值不能大於5
(17)min:10 輸入值不能小於10
默認的提示
複製代碼代碼如下:
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
},

如需要修改，可在js代碼中加入：
複製代碼代碼如下:
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} 的值")
});