jquerty.validate整合表单验证

今天学到一个新的表单验证技巧：

validate.js

/**
 * 这个js将以前写的那种比较老的验证代码给整合了起来
 * 使用规则需要与前台相匹配使用
 * form标签必须设置validate属性为true
 * jsp中要有validate的属性
 * jsp中要有validate的属性而且其值要有规定，只能为jqueryValidate中能够有的,required等等，这个参照api即可
 * 
 */

//new json对象
var message={};

$(function(){
	
	/**
	 * 利用jQuery 属性选择器把validate属性进行循环
	 * 得到名为validate-message属性的值
	 * 得到名为name属性的值
	 * 最后一步将validate-message属性的值给设置样式然后存到message中去
	 * 最后的出来的类似var message= {"name":"...","..":".."}
	 * 这个的作用就是做message，以前的都是直接设置为
	 * jQuery.validator.messages.required = "<span class='error' generated='true' style='color: red; font-size: 12px;'>*请填写此内容</span>";
	 * 
	 */
	$("[validate]").each(function(){
		var messageStr=$(this).attr("validate-message");
		var field=$(this).attr("name");
		message[field]="<font color='red'>"+messageStr+"</font>";
	});
	
	/**
	 *	把凡是属性为valid并且其值为true的form进行验证
	 *  最后那个设置删除或者添加验证规则
	 *  那个reules后面的content只是一个变量，没什么特殊的含义，占个位置
	 *  ，他们到后来都是要改变的，他们就像占位符
	 *  ，不过一定要严格按照那个格式{XX:false/ture}或者{xx:{XX:false/ture}}
	 *  message对应的就是上面那个new的message
	 */
	$("form[valid='true']").validate({
		rules:{content:{required:true}},
		messages:message
	});
	
	/**
	 * 利用jQuery 属性选择器把validate属性进行循环，以设置验证规则
	 */
	$("[validate]").each(function(){
		//获取validate属性值，是验证方式的名称
		//一般都是required，还有字数限制的等等
		
		var attr=$(this).attr("validate");
		//这个是设置是否验证，这里设为true，验证
		var rule={};
		rule[attr]=true;
		//这里是动态添加或者删除验证规则，添加add，删除remove
		//$(this),这个validate属性的HTML标签，一般是input,textarea
		$(this).rules("add", rule);
	});
	
});

这个是传统的：
$(function(){
	
	jQuery.validator.messages.required = "<span class='error' generated='true' style='color: red; font-size: 12px;'>*请填写此内容</span>";
	jQuery.validator.messages.number = "<span class='error' generated='true' style='color: red; font-size: 12px;'>*请填写数字 </span>";
	jQuery.validator.messages.maxlength = "<span class='error' generated='true' style='color: red; font-size: 12px;'>*已达到最大字符数 </span>";
	$("#add_form").validate({
		rules : {
			year : {required : true},
			detail : {required : true, maxlength :300 },
			score : {required : true, number:true}
		}
	});	

});

为什么要使用

$(this).rules("add", rule);

看下源码：add，remove，添加删除元素验证

jQuery.validate.js

if ( command ) {
			var settings = $.data(element.form, "validator").settings;
			var staticRules = settings.rules;
			var existingRules = $.validator.staticRules(element);
			switch(command) {
			case "add":
				$.extend(existingRules, $.validator.normalizeRule(argument));
				// remove messages from rules, but allow them to be set separetely
				delete existingRules.messages;
				staticRules[element.name] = existingRules;
				if ( argument.messages ) {
					settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );
				}
				break;
			case "remove":
				if ( !argument ) {
					delete staticRules[element.name];
					return existingRules;
				}
				var filtered = {};
				$.each(argument.split(/\s/), function( index, method ) {
					filtered[method] = existingRules[method];
					delete existingRules[method];
				});
				return filtered;
			}
		}

jsp:

<!-- 
			这里和js要对应起来，设置个valid属性为ture，就表示此表单要做验证 
			如果没有就会报错。看看源码
			// http://docs.jquery.com/Plugins/Validation/rules
			rules: function( command, argument ) {
			var element = this[0];
			if ( command ) {
			var settings = $.data(element.form, "validator").settings;
			var staticRules = settings.rules;
			var existingRules = $.validator.staticRules(element); 
			22行将该被验证的那个标签给找出来了，input
			24行又要找form，本来找form是完全没问题的,但是这个表单必须得标识是要validate的，
			$("form[valid='true']").validate({
				rules:{content:{required:true}},
				messages:message
			});
		
			data() 方法向被选元素附加数据，或者从被选元素获取数据。
			
		-->
		<form action = "<c:url value = "/book"></c:url>" method = "post" valid="true">

JQuery必记知识：

jQuery选择器

jQuery元素选择器

jQuery 使用 CSS选择器来选取 HTML 元素。

$("p")选取<p> 元素。

$("p.intro")选取所有 class="intro"的 <p> 元素。

$("p#demo")选取所有 id="demo" 的 <p> 元素。

 

jQuery属性选择器

jQuery 使用 XPath表达式来选择带有给定属性的元素。

$("[href]")选取所有带有 href 属性的元素。

$("[href='#']")选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']")选取所有带有 href值不等于 "#" 的元素。

$("[href$='.jpg']")选取所有 href 值以 ".jpg" 结尾的元素。

 

 

 

jQueryCSS 选择器

jQuery CSS 选择器可用于改变 HTML元素的 CSS 属性。

$("#addCommentId"+parentId).css('display');

 

更多的选择器实例

语法	描述
$(this)	当前 HTML元素
$("p")	所有 <p>元素
$("p.intro")	所有 class="intro"的 <p> 元素
$(".intro")	所有 class="intro"的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul>的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg"结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div>元素中的所有 class="head"的元素

 

 

JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串（伪对象），然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户端传递给服务器端程序。这个字符串看起来有点儿古怪（稍后会看到几个示例），但是 JavaScript 很容易解释它，而且 JSON 可以表示比名称/值对更复杂的结构。例如，可以表示数组和复杂的对象，而不仅仅是键和值的简单列表。