【jQuery】无须id、name与class等属性,直接对表单中的所有表单项进行遍历、判断、检验

虽然看上去好像很爽的样子,尤其在一些具有超过单行文本框<input type="text" />、多行文本框<textarea>等页面,但是,遇到一些需要特定判断的页面,你还不如设置一个id,直接通过id来取,简单方便,不用考虑遍历问题这么艰难。这种方法只是尤其使用于那些超多文本框的页面,但你又不想连用服务器语言什么aspx,jsp,php设置N个id的情况。例如,利用这个方法能够改进《【JavaScript】表单提交之前的前台处理检查三部曲》(点击打开链接),代码就不用写这么长了嘛!同时,这种方法是能够对限定表单作用,不想网上的一些方法,一旦遍历就要遍历整个页面。

一、基本目标

如下例子。如果哪个文本框的字数超标,或者为空,马上给出提示,同时这个文本框的边框颜色变红,并且告警。这里是能够对限定表单作用,无论表单以外的输入框输了写什么都不参与验证。

二、HTML布局

很简单,只是希望大家注意到,这里设置了一个div放错误信息。同时设置了一个在表单外的输入框。另外,表单内的所有输入框、多行文本框,没有任何id、name与class等属性,但我还是能够进行判断。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无ID检验</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
</head>

<body>
<div id="errorMsg" style="color:#ff0000;"></div>
表单以外:<input type="text" /><br />
表单以内:
<form action="" method="post" onsubmit="return submitPreprocessing(this)">
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<textarea rows="10" cols="20" wrap="virtual"></textarea><br />
<input type="submit" value="Go!" />
</form>
</body>
</html>

三、jQuery脚本

1、根据onsubmit属性传递过的form表单进行检验

2、这里其实有点《【JavaScript】原生态兼容IE6的图片轮播》(点击打开链接)的分页思想。如果不符合要求的表单项告警、提交判断的布尔值设置为false之外,记得要把符合要求的表单项恢复原状。不然用户不干了,但是错误信息则不用理他。因为用户每次点击submit按钮,errMsg变量都会变清空。

3、利用$(obj).find("input[type=‘text‘]").each()方法能够对所有单行文本框进行遍历,其余表单项同理。each()里面的参数可以是函数,这里就是我们的判断函数。这个函数里面的this就是每一个遍历项。

4、function getStrLength()是用来区分英文与中文计数的,英文的算一个字符,中文算2个字符。

<script>
function submitPreprocessing(obj){
	var isFormOK=true;
	var i=0;
	var j=0;
	var errMsg="";
	$(obj).find("input[type='text']").each(function (){
		i++;
		if(getStrLength($(this).val())==0){
			errMsg+="第"+i+"单行文本框为空!";
			$(this).css("border","2px solid #ff0000");
			isFormOK=false;
		}
		else if(getStrLength($(this).val())>10){
			errMsg+="第"+i+"单行文本框字数多于5!";
			$(this).css("border","2px solid #ff0000");
			isFormOK=false;
		}
		else{
			$(this).css("border","1px solid #cccccc");
		}
	});
	$(obj).find("textarea").each(function (){
		j++;
		if(getStrLength($(this).html())==0){
			errMsg+="第"+j+"多行文本框为空!";
			$(this).css("border","2px solid #ff0000");
			isFormOK=false;
		}
		else if(getStrLength($(this).html())>20){
			errMsg+="第"+j+"多行文本框字数多于10!";
			$(this).css("border","2px solid #ff0000");
			isFormOK=false;
		}
		else{
			$(this).css("border","1px solid #cccccc");
		}
	});
	if(!isFormOK){
		$("#errorMsg").html(errMsg+"请修改!");
		return false;
	}
	else{
		alert("谢谢你的填写!");
		$("#errorMsg").html("");
		return false;
	}
}

function getStrLength(str) {
	var mylen = 0;
	for (var i = 0; i < str.length; ++i) {
		if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
			++mylen;
		} else {
			mylen += 2;
		}
	}
	return mylen;
}
</script>
时间: 2024-08-04 08:24:01

【jQuery】无须id、name与class等属性,直接对表单中的所有表单项进行遍历、判断、检验的相关文章

jQuery easyUI id选择器 类选择器 标签选择器 属性选择器 及DOM对象和jQuery相互之间的转换

首先导入js文件 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"

js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>

js中的innerText、innerHTML、属性值、value与jQuery中的text()、html()、属性值、val()总结

js与jQuery获取text.html.属性值.value的方法是不一样的. js与jQuery,text与innerText获取(<!---->中为结果) html: <p id="test">这是段落中的 <b>粗体</b> 文本.</p> <button id="btn10">jQuery显示text</button> <!--Text: 这是段落中的 粗体 文本.--

jquery如何修改连接a的href属性值

jquery如何修改连接a的href属性值:有时候可能需要动态的修改超链接的指向地址,下面通过代代码实例简单的介绍一下.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部

JavaScript(19)jQuery HTML 获取和设置内容和属性

jQuery HTML jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力.jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易. 提示:DOM = Document Object Model(文档对象模型) DOM 定义访问 HTML 和 XML 文档的标准:"W3C 文档对象模型独立于平台和语言的界面,允许程序和脚本动态访问和更新文档的内容.结构以及样式."

jquery 取子节点及当前节点属性值

分享下jquery取子节点及当前节点属性值的方法. <li class="menulink"><a href="#" rel="external nofollow" id="101" onclick="changeMenu('101','资料管理','#' )"><span>资料管理</span></a></li>取子节点:$(&quo

jquery attr方法获取input的checked属性问

问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别: 1.通过prop方法获取checked属性,获取的checked返回值为boolean,选中为true,否则为flase . 代码如下: <input type="checkbox" id="selectAll" onclick="checkAll()">全选 function

Jquery使用Id获取焦点和失去焦点

Jquery使用Id获取焦点和失去焦点有2种方法 先用第一种(val()=="空"): <div> <input type="text" id="address" value="请输入邮箱地址" /> <input type="text" id="password" value="请输入邮箱密码" /> <input type

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法 一丶什么是JQuery JQuery: ???????JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率 ??????js库是包含了把复杂的功能封装到简单的方法中 JQuery的两大特性: ???????链式编程:可以.的形式实现多个功能 ?