写给新手：js的表单操作（二） 简单的表单提交验证
表单验证是常用的规范表单填写、避免填写疏漏、防范非法操作的方法，很多初学者都对它很有兴趣。
这里给广大的初学者提供了一个简单的例子，例中对表单样式给出了一些处理，使它看上去更加美观。验证函数部分只是比较简单的示意，但也有一定的使用价值，可供参考。下面提供代码：
查看代码：
View Code 
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>写给新手：js的表单操作（二） 简单的表单验证</title>
5 <script language="text/javascript" type="text/javascript">
6
7 function IsDigit(imyeah){ //数字判定，非数字返回false
8 return (('0'<=imyeah) && (imyeah<='9'));
9 }
10
11 function IsAlpha(imyeah){ //字母判定，非字母返回false
12 return ((('a'<=imyeah) && (imyeah<='z')) || (('A'<=imyeah) && (imyeah<='Z')))
13 }
14
15 function IsaNull(imyeah){ //空值判定，空返回false
16 return(imyeah != " ")
17 }
18
19 ////////////////////////////////////////////////////////////////
20
21 function checkform(){ //验证函数体
22 var id =document.sform1.id.value; //获得注册名的值
23 if (id==""){ //判断注册名是否为空
24 document.getElementById("note").innerHTML="请输入注册名"; //提示消息内容
25 document.sform1.id.focus(); //同时使目标框获取焦点
26 return false;
27 }
28 for (nIndex=0; nIndex<id.length; nIndex++){ //使用for循环检查注册名中有无非法字符
29 imyeah = id.charAt(nIndex); //charAt() 方法可返回指定位置的字符
30 if (!(IsDigit(imyeah) || IsAlpha(imyeah) || imyeah=='-' || imyeah=='_' || imyeah=='.')){
31 document.getElementById("note").innerHTML="用户名只能使用字母、数字以及-、_和.，并且不能使用中文";
32 document.sform1.id.focus();
33 return false;
34 }
35 }
36 chineseid = document.sform1.chineseid.value;
37 if (chineseid ==""){
38 document.getElementById("note").innerHTML="请输入中文昵称";
39 document.sform1.chineseid.focus();
40 return false;
41 }
42 password = document.sform1.password.value;
43 if (password == ""){
44 document.getElementById("note").innerHTML="请输入登陆密码";
45 document.sform1.password.focus();
46 return false;
47 }
48 password1 = document.sform1.password1.value;
49 if (password>password1){
50 document.getElementById("note").innerHTML="重复密码与登陆密码不相同";
51 document.sform1.password.focus();
52 document.sform1.password1.focus();
53 return false;
54 }
55 if (password<password1){
56 document.getElementById("note").innerHTML="重复密码与登陆密码不相同";
57 document.sform1.password.focus();
58 document.sform1.password1.focus();
59 return false;
60 }
61 if (document.sform1.email.value == ""){
62 document.getElementById("note").innerHTML="请输入您的E-MAIL地址";
63 document.sform1.email.focus();
64 return false;
65 }
66
67 email=document.sform1.email.value; //email格式的判断
68 emailerr=0
69
70 for (i=0; i<email.length; i++){ //检查是不是存在“@”字符。
71 if ((email.charAt(i) == "@") && (email.length > 5)){
72 emailerr=emailerr+1
73 }
74 }
75 if (emailerr != 1){
76 document.getElementById("note").innerHTML="请输入正确的E-MAIL地址";
77 document.sform1.email.focus();
78 return false;
79 }
80 if (document.sform1.checkask.value==""){
81 document.getElementById("note").innerHTML="密码提示问题不能为空";
82 document.sform1.checkask.focus();
83 return false;
84 }
85 if (document.sform1.checkans.value==""){
86 document.getElementById("note").innerHTML="您的密码提示问题答案不能为空";
87 document.sform1.checkans.focus();
88 return false;
89 }
90 sform1.submit(); //通过检查则提交表单
91 }
92 </script>
93 <style type="text/css">
94 body {
95 font-size:12px;
96 color:#333;
97 }
98 .inputtitle {/*输入框标题样式*/
99 float:left;
100 width:90px;
101 text-align:right;
102 height:24px;
103 line-height:26px;
104 }
105 input, select {/*输入框、文本域样式*/
106 width:180px;
107 padding:3px;
108 height:24px;
109 line-height:18px;
110 border:#ddd 1px solid;
111 border-right:#f2f2f2 1px solid;
112 border-bottom:#f2f2f2 1px solid;
113 }
114 select{
115 height:26px;
116 }
117 input#button{/*按钮样式*/
118 border:#ccc 1px solid;
119 background:#f2f2f2;
120 cursor:pointer;
121 padding:3;
122 }
123 #note{/*提示消息样式*/
124 color:red;
125 }
126 </style>
127 </head>
128
129 <body>
130 <form action="#" method="post" enctype="multipart/form-data" name="sform1">
131 <p><span class="inputtitle">
132 <label for="id">注册名：</label>
133 </span>
134 <input id="id" name="id" type="text" value="" />
135 </p>
136 <p> <span class="inputtitle">
137 <label for="chineseid">中文昵称：</label>
138 </span>
139 <input id="chineseid" name="chineseid" type="text" value="" />
140 </p>
141 <p> <span class="inputtitle">
142 <label for="password">密码：</label>
143 </span>
144 <input id="password" name="password" type="password" value="" />
145 </p>
146 <p> <span class="inputtitle">
147 <label for="password1">重复密码：</label>
148 </span>
149 <input id="password1" name="password1" type="password" value="" />
150 </p>
151 <p> <span class="inputtitle">
152 <label for="email">电子邮箱：</label>
153 </span>
154 <input id="email" name="email" type="text" value="" />
155 </p>
156 <p> <span class="inputtitle">密码提示问题：</span>
157 <select name="checkask">
158 <option value="1">你多大了？</option>
159 <option value="2">你的出生日期？</option>
160 <option value="3">你的初中老师班主任名字？</option>
161 </select>
162 </p>
163 <p> <span class="inputtitle">
164 <label for="checkans">答案：</label>
165 </span>
166 <input id="checkans" name="checkans" type="text" value="" />
167 </p>
168 <p> <span class="inputtitle">
169 </span>
170 <input id="button" name="button" type="button" onclick="checkform()" value="提交" />
171 </p>
172 </form>
173 <div id="note"></div>
174 </body>
175 </html>
代码中的注释比较多，适于初学者学习。说明文字比较少，代码如有疏漏或者不明白的地方，欢迎给我留言或发邮件：zuoyiduohua@foxmail.com
运行效果：
