复习一下jquery获取表单的一些用法:
表单是动态生成的一个数组,可以有N个class和name相同的表单
div代码:
<textarea rows="" cols="" name="monitorShowUriKey" class="form-control input-sm monitor" style="resize: none;width:180px">${fn:escapeXml(extralist.url)}</textarea>
提交按钮的click事件里面做判断逻辑:
$(".monitor").each(function(){
var val = $.trim($(this).val());
if(val.length==0){
$(this).next().html("不能为空");
$(this).closest("div.form-group").addClass("has-error");
validateSuccess = false;
}else if(val.length>500){
$(this).next().html("长度不能超过500");
$(this).closest("div.form-group").addClass("has-error");
validateSuccess = false;
}else{
$(this).next().html("");
$(this).closest("div.form-group").removeClass("has-error");
}
});
实际上就是jquery的each的用法,重点关注class的写法,monitor
想添加一个输入区域失去焦点的事件,类似于onmouseout,jquery里面的实现是blur方法,
但是,单个表单好实现,这种name为数组的情况,应该如何实现呢?用live
具体实现如下:
$(".monitor").live("blur",(function(){
var val = $(this).context.value;
if(val.length==0){
$(this).next().html("不能为空");
$(this).closest("div.form-group").addClass("has-error");
validateSuccess = false;
}else if(val.length>500){
$(this).next().html("长度不能超过500");
$(this).closest("div.form-group").addClass("has-error");
validateSuccess = false;
}else{
$(this).next().html("");
$(this).closest("div.form-group").removeClass("has-error");
}
}));
注意,这个得写在$(document).ready(function(){里面。