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 = "*请填写此内容";
*
*/
$("[validate]").each(function(){
var messageStr=$(this).attr("validate-message");
var field=$(this).attr("name");
message[field]=""+messageStr+"";
});
/**
* 把凡是属性为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 = "*请填写此内容";
jQuery.validator.messages.number = "*请填写数字 ";
jQuery.validator.messages.maxlength = "*已达到最大字符数 ";
$("#add_form").validate({
rules : {
year : {required : true},
detail : {required : true, maxlength :300 },
score : {required : true, number:true}
}
});
});
为什么要使用
$(this).rules("add", rule);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:
JQuery必记知识：
jQuery选择器
jQuery元素选择器
jQuery 使用 CSS选择器来选取 HTML 元素。
$("p")选取
$("p.intro")选取所有 class="intro"的
$("p#demo")选取所有 id="demo" 的
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.intro") |
所有 class="intro"的 |
| $(".intro") |
所有 class="intro"的元素 |
| $("#intro") |
id="intro" 的元素 |
| $("ul li:first") |
每个 |
| $("[href$='.jpg']") |
所有带有以 ".jpg"结尾的属性值的 href 属性 |
| $("div#intro .head") |
id="intro" 的 |
JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串（伪对象），然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户端传递给服务器端程序。这个字符串看起来有点儿古怪（稍后会看到几个示例），但是 JavaScript 很容易解释它，而且 JSON 可以表示比名称/值对更复杂的结构。例如，可以表示数组和复杂的对象，而不仅仅是键和值的简单列表。