【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" ""><html xmlns=""><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、functiongetStrLength()是用来区分英文与中文计数的,英文的算一个字符,中文算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>

也许不是自己该去发挥的地方,还是让自己到最适合自己战斗的方面去吧!勇敢的接受自己的失败,

【jQuery】无须id、name与class等属性,直接对表单中的所有表单

相关文章:

你感兴趣的文章:

标签云: