jquery的一些简单用法

最新推荐文章于 2020-10-25 12:12:36 发布

原创最新推荐文章于 2020-10-25 12:12:36 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍使用jQuery进行表单验证的方法，包括如何通过each遍历相同class的表单元素并进行内容检查，以及如何为这些元素添加失焦事件来触发验证。

复习一下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(){里面。