網頁設計：Javascript實現的自動驗證函式執行個體

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

javascript|函數|設計|網頁|網頁設計

test.htm

1
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="">
16ＩＤ<INPUT TYPE="text" id="txtInt" NAME="txtInt" maxlength="6" feildtype="integer" msg=",<%=IMSG0002%>" ><br>
17ＩＤ<INPUT TYPE="text" id="txtInt" NAME="txtInt" maxlength="6" feildtype="integer" msg=",<%=IMSG0002%>" ><br>
18ＩＤ<INPUT TYPE="text" id="txtInt" NAME="txtInt" maxlength="6" feildtype="integer" msg=",<%=IMSG0002%>" ><br>
19ＩＤ<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" >
27<SCRIPT LANGUAGE="javascript">
28
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%>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More