在填写表单时可能希望用户必须填写某些字段或者两段填写的字段相匹配，然后才能提交表单，这里就可以用js来实现
下面是建立一个基础表单的HTML代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset = "utf-8"> 5 <title>Password check</title> 6 <link rel="stylesheet" type="text/css" href="p6_3.css"> 7 <script src="p6_3.js"></script> 8 </head> 9 <body> 10 <form action="#"> 11 <p><label for="userName">Your name:<input type="text" size="30" id="userName" class="reqd"></label></p> 12 13 <p><label for="passewd1">Choose a password:<input type="password" id="password1" class="reqd"></label></p> 14 15 <p><label for="password2">Verify your password:<input type="password" id="password2" class="reqd passwd1"></label></p> 16 17 <input type="submit" value="Submit"> <input type="reset" value="reset"> 18 </form> 19 </body> 20 </html>
以下是添加的简单CSS代码：
1 body{
2 color: #000;
3 background-color: #fff;
4 font-family: verdana;
5 font-style: italic;
6 }
7
8 input.invalid{
9 background-color: #ff9;
10 border:2px red inset;
11 }
12
13 label.invalid{
14 color: #f00;
15 font-weight: bold;
16 }
以下是js代码（是js基础教程上的，感觉有些复杂，应该是可以简单的，不过里面的逻辑值得学习下）：
1 window.onload = initForm;
2
3 function initForm(){
4 for(var i=0; i<document.forms.length; i++){
5 document.forms[i].onsubmit = validForm;//当要提交表单时调用validForm函数
6 //如果返回false则不将表单提交给相应的CGI
7 }
8 }
9 function validForm(){
10 var allTags = document.getElementsByTagName("*");//获取所有的元素
11 var allGood = true;//定义一个标志作为函数返回值
12
13 for(var i=0;i<allTags.length;i++){
14
15 if(!validTag(allTags[i])){ //用For循环一个个标签用validTags检验
16
17 allGood = false; //如果检验返回值为false 说明有问题，标志也设为false
18 }
19 }
20
21 return allGood; //最后返回allGood
22
23 function validTag(thisTag){
24 var outClass = "";
25
26 var allClass = thisTag.className.split(" ");//split(" ")函数根据空格号分隔字符串为一个个小的字符串，比如"hello world"就会变为"hello" "world"
27 if(allClass.length>1){
28 for(var i=0;i<allClass.length;i++){ //将由一个元素类名得到的小的字符串分别去验证
29 alert(allClass[i]); //这里是用于测试看看每次点击提交后类名都发生了什么变化
30 }
31 alert("over");
32 } //以上的For循环刚开始不用管
33
34 for(var j=0 ; j<allClass.length ; j++){
35 outClass += validBasis(allClass[j])+" ";//用validBasis验证，返回的新类名后面都加空格
36 }
37 thisTag.className = outClass;
38 if(outClass.indexOf("invalid") > -1){ //如果类名中有invalid证明有问题
39 invalidLabel(thisTag.parentNode);
40 this.focus(); //获得焦点
41 if(thisTag.nodeName == "INPUT"){
42 thisTag.select(); //如果是input标签则选择它的值让用户更易修改
43 }
44 return false;
45 }
46
47 return true;
48
49
50 function validBasis(thisClass){
51
52 var classBack = "";
53 switch(thisClass){
54 case "":
55 case "invalid":
56 break;
57 case "reqd":
58 /*alert("hello");*/
59 if(allGood && thisTag.value == ""){
60
61 classBack = "invalid ";//注意这里的空格！
62
63 }
64
65 classBack += thisClass;//保证不丢失原来类名，这样多次点击就不会失效
66 break;
67 default:
68 if(allGood && !crossCheck(thisTag,thisClass)){
69 classBack = "invalid ";
70 }
71 classBack += thisClass;
72
73 }
74 return classBack;
75 }
76
77 function crossCheck(inTag,otherFieldId){//最后验证两次输入的密码是否一致
78 if(!document.getElementById(otherFieldId)){
79 return false;
80 }
81 return(inTag.value == document.getElementById(otherFieldId).value);
82 }
83
84 function invalidLabel(parentTag){
85 if(parentTag.nodeName == "LABEL"){
86 parentTag.className += " invalid";
87 }
88 }
89 }
90 }
要点：这里用到了一个字符串分割函数split(),比如var str="hello world",str1 = str.split(" "), str1最后可以得到一个字符串数组{"hello","world"},所以可以看到"invalid "里都加了空格。这样就可以保存元素的多个类名，当用户多次点击提交时能够得到正常处理
时间： 2024-08-02 21:49:55