Javascript实现的自动验证函数(原创)

test.htm

 1<!-- #include file="message.inc" -->
 2<HTML>
 3<HEAD>
 4<TITLE> New Document </TITLE>
 5    <meta http-equiv="content-type" content="text/html; charset=shift_jis" />
 6    <meta http-equiv="pragma" content="no-cache">
 7    <meta http-equiv="cache-control" content="no-cache">
 8    <meta http-equiv="expires" content="0">
 9<script src="common.js"></script>
10<script src="validate.js"></script>
11
12</HEAD>
13
14<BODY>
15<FORM METHOD=POST ACTION="">
16ID<INPUT TYPE="text" id="txtInt" NAME="txtInt" maxlength="6" feildtype="integer" msg=",<%=IMSG0002%>" ><br>
17ID<INPUT TYPE="text" id="txtInt" NAME="txtInt" maxlength="6" feildtype="integer" msg=",<%=IMSG0002%>" ><br>
18ID<INPUT TYPE="text" id="txtInt" NAME="txtInt" maxlength="6" feildtype="integer" msg=",<%=IMSG0002%>" ><br>
19ID<INPUT TYPE="text" id="txtInt" NAME="txtInt" maxlength="6" feildtype="integer" msg=",<%=IMSG0002%>" ><br>
20
21名称<INPUT TYPE="text" id="txtString" NAME="txtString" maxlength="5" feildtype="string" msg="<%=IMSG0003%>,<%=IMSG0004%>" mustitem="true"><br>
22名称<INPUT TYPE="text" id="txtString" NAME="txtString" maxlength="5" feildtype="string" msg="<%=IMSG0003%>,<%=IMSG0004%>" mustitem="true"><br>
23名称<INPUT TYPE="text" id="txtString" NAME="txtString" maxlength="5" feildtype="string" msg="<%=IMSG0003%>,<%=IMSG0004%>" mustitem="true"><br>
24
25名称2<INPUT TYPE="text" id="txtStr" NAME="txtStr" maxlength="5" feildtype="string" msg="<%=IMSG0003%>,<%=IMSG0004%>" mustitem="true"><br>
26<INPUT TYPE="button" value="submit" onclick="validate(); return false;">
27<SCRIPT LANGUAGE="JavaScript">
28<!--
29//validate()
30//-->
31</SCRIPT>
32</FORM>
33</BODY>
34</HTML>
35

validate.js
 1function validate(){
 2
 3    //var objs = document.all;
 4    //var Elements = document.getElementsByTagName("*");
 5    var Elements;
 6    var ctlArray;
 7    var ctlArrayName;
 8    var i, j;
 9    var elLen, arrLen;
10    var msgs;
11
12    Elements = document.getElementsByTagName("input");
13    arrName ="";
14
15    for ( i in Elements ) {
16    elLen = Elements[i].length;
17
18        if (elLen > 1{
19            ctlArray = Elements[i];
20            arrLen = ctlArray.length;
21
22            if (arrName != ctlArray[0].name) {
23                arrName = ctlArray[0].name;
24
25                for (j=0; j < arrLen; j++{
26                    if (checkValue(ctlArray[j]) == false{
27                        return false;
28                    }
 
29                }

30
31            }

32
33        }
else{
34
35            if (checkValue(Elements[i]) == false{
36                return false;
37            }

38        }

39    }

40
41    return true;
42}

43
44function checkValue (obj){
45
46    var len;
47    len = obj.maxLength;
48
49    if ( obj.type == "text" ) {
50
51        //if (obj.msg != undefined ) {
52        if ( obj.msg ) {
53            msgs = obj.msg.split(",");
54        }
 else {
55            return true;
56        }

57
58        if ( trim(obj.value) == "" && obj.mustitem && obj.mustitem == "true"{
59            alert(msgs[0]);
60            getFocusSelect(obj);
61            return false;
62        }
else {
63
64            if ( trim(obj.value) != ""&& obj.feildtype && obj.feildtype == "integer" ) {
65
66                if ( checkNumLen(obj.value, len) == false ) {
67                    alert(msgs[1]);
68                    getFocusSelect(obj);
69                    return false;
70                }

71
72            }
 else if ( trim(obj.value) != "" && obj.feildtype && obj.feildtype == "string" ) {
73
74                if ( getLenthByByte(trim(obj.value)) > len){
75                    alert(msgs[1]);
76                    getFocusSelect(obj);
77                    return false;
78                }

79            }

80        }

81    }

82
83}


message.inc
1<%
2Const IMSG0001 = "ID必须输入!"
3Const IMSG0002 = "ID输入格式错误!"
4Const IMSG0003 = "名称必须输入!"
5Const IMSG0004 = "名称输入格式错误!"
6%>
我来自:向东博客
posted @ 2007-04-05 09:52 meil 阅读(2492) 评论(9)  编辑 收藏 网摘 所属分类: JavaScriptAjaxASP

  回复  引用  查看    
#1楼 2007-04-05 14:21 | 非我      
不怎么实用
  回复  引用  查看    
#2楼 [楼主]2007-04-06 17:56 | EastLu      
不实用?没用过就别乱说话。
3个页面,有400、500项Text。每个都要验证。你试试自己写写。

  回复  引用  查看    
#3楼 2007-04-09 12:34 | ^-^Roping.Zong      
怎么说哪 ?
提供了一种思路!
.Net中,实现自己验证的控件是一种比较好的解决办法!!
见 :
http://www.cnblogs.com/Roping/archive/2007/01/24/628764.html

  回复  引用  查看    
#4楼 2007-04-10 09:18 | 非我      
@ EastLu
几百项验证的页面我还真没做过(这样的设计真是让人无语,就不考虑用户体验的吗?),但几十项的倒是经常做。

我说不实用不是关乎数量,而是因为在实际操作中,任何一个验证项(不仅仅是input)都有几种验证需要(我做过的项目中最少的是2项,一个数据类型,一个最大字节长度,无一例外),有的验证项还需要参数(例如长度范围,取值范围),还有的需要特殊的错误提示处理(有的要对话框式的,有的要在页面上出提示,甚至可能还有要配合JS脚本才能做到的效果)。

或者用你的可以解决方案可以很好的解决上述问题(的确没时间认真研究你的成果),可以请给出更详细的示例吗。

  回复  引用  查看    
#5楼 [楼主]2007-04-11 11:10 | EastLu      
@非我
第一要说的是它的设计是没有问题的,那是个应用系统,属于Master部分,需要设置大量的参数,基本上都是数值型的

第二你说的多个验证项的问题也可以解决的
maxlength="5"
feildtype="string"
msg="<%=IMSG0003%>,<%=IMSG0004%>" mustitem="true"
这几个参数除了maxlength外,都是非标准的html属性,你要验证其他的项目可以自己加入其他的属性。

比如说比较俩个控件的值:
就在加入一个属性compareItem
<INPUT TYPE="text" id="txtInt1" NAME="txtInt1" maxlength="6" feildtype="integer" msg=",<%=IMSG0002%>"
<INPUT TYPE="text" id="txtInt2" NAME="txtInt2" maxlength="6" feildtype="integer" msg=",<%=IMSG0002% compareItem="txtInt1">"


还可以加入自定义的校验方法的
<INPUT TYPE="text" id="txtInt1" NAME="txtInt1" maxlength="6" feildtype="integer" myFun="mycheck()">"
很灵活的,就看你的。。。

  回复  引用  查看    
#6楼 [楼主]2007-04-11 11:16 | EastLu      
提示:
1.HTML控件的属性可以自定义的,这是实现这个思想的基础,也为我们进一步扩展提供了必要的条件

2.这个实现思想的核心是要实现,用户描述验证的条件,无须编写脚本实现前台(JS)和后台(ASP)的智能校验。减少编码量

其次,我在这里只是起个抛砖引玉的作用,给大家提供一个解决的方法,大家还可以进行扩展的。比这个复杂的应用我也做过,不过那是很久以前的一个JAVA项目中的代码已经找不到了。要不可以那里与大家分享一下的。
感谢各位的评论! :)

  回复  引用    
#7楼 2007-04-27 23:39 | 假正经哥哥 [未注册用户]
想法太简单,太烂
  回复  引用  查看    
#8楼 [楼主]2007-04-28 11:28 | EastLu      
@假正经哥哥
哦?请赐教。。。


发表评论



姓名 [登录] [注册] 
主页
Email (仅博主可见) 
验证码 *  验证码看不清,换一张
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论   新用户注册   返回页首      

导航: 网站首页 社区 新闻 博问 闪存 网摘 招聘 .NET频道 知识库 找找看 Google站内搜索



China-pub 计算机图书网上专卖店!6.5万品种 2-8折!
China-Pub 计算机绝版图书按需印刷服务

相关文章:

相关链接: