使用dreamweaver设计常用注册页面表单验证

最新推荐文章于 2023-11-29 20:45:16 发布

weixin_33747129

最新推荐文章于 2023-11-29 20:45:16 发布

阅读量3.1k

点赞数

文章标签： javascript xhtml 操作系统 ViewUI

原文链接：https://my.oschina.net/bigfool007139/blog/406125

版权

2019独角兽企业重金招聘Python工程师标准>>> ...

摘要由CSDN通过智能技术生成

2019独角兽企业重金招聘Python工程师标准>>>

网页注册页面验证设计，必须使用dreamweaver的表单来实现，或者spry库。这里介绍的第一个是最原始的表单验证方式，即没有使用即时验证，需要点击提交按钮才进行验证，也没有使用正则表达式或者AJAX验证，也或者是JQuery的验证，不过这么多验证方式接着第一个后面都会写出来的

1、最原始的注册验证方式，需要通过点击提交按钮才验证

先上图在此输入图片描述

代码如下：

Html代码复制代码收藏代码 1.<span style="font-size: medium;"><span style="font-size: large;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.<html xmlns="http://www.w3.org/1999/xhtml">
3.<head>
4.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5.<title>无标题文档</title>
6.</head>
7.
8.<body>
9.<div id="content">
10. 
11.<SCRIPT language="javascript" type="text/javascript">
12.//checkUserName() && sNameCheck() && passCheck() && bdaycheck() && genderCheck() && emailcheck() &&
13.function validateform(){
14. if(checkUserName() && sNameCheck() && passCheck()&& emailcheck() && bdaycheck() && genderCheck() && agree( ))
15. return true;
16. else
17. return false;
18.
19.
20.}
21. //validate Name
22.function checkUserName(){
23.var fname = document.userfrm.fname.value;
24.var lname = document.userfrm.lname.value;
25.// validate first Name
26.if(fname.length != 0){
27. for(i=0;i<fname.length;i++){
28. var ftext = fname.substring(i,i+1);
29. if(ftext < 9 || ftext > 0){
30. alert("名字中包含数字 \n"+"请删除名字中的数字和特殊字符");
31. document.userfrm.fname.focus();
32. document.userfrm.fname.select();
33. return false
34. }
35. }
36.}
37.else{
38. alert("请输入“名字”文本框");
39. document.userfrm.fname.focus();
40. return false
41.}
42.// Validate last name
43.if(fname.length != 0){
44. for(i=0;i<fname.length;i++){
45. var ftext = fname.substring(i,i+1);
46. if(ftext < 9 || ftext > 0){
47. alert("名字中包含数字 \n"+"请删除名字中的数字和特殊字符");
48. document.userfrm.fname.focus();
49. document.userfrm.fname.select();
50. return false
51. }
52. }
53.}
54.else{
55. alert("请输入“名字”文本框");
56. document.userfrm.fname.focus();
57. return false
58.}
59.// Validate last name
60.if(lname.length != 0){
61. for(j=0;j<lname.length;j++){
62. var ltext = lname.substring(j,j+1);
63. if(ltext < 9 || ltext > 0){
64. alert("姓氏中包含数字 \n"+"请删除姓氏中的数字和特殊字符");
65. document.userfrm.lname.focus();
66. document.userfrm.lname.select();
67. return false
68. }
69. }
70.}
71.else{
72. alert("“姓氏”文本框为空");
73. document.userfrm.lname.focus();
74. return false;
75. }
76.return true;
77.}
78.// Login Name Validation
79.function sNameCheck(){
80.var sname = document.userfrm.sname.value;
81.var illegalChars = /\W/;
82. if(sname.length != 0){
83. if(illegalChars.test(sname)){
84. alert("登录名无效");
85. document.userfrm.sname.select();
86. return false;
87. }
88. }
89. else{
90. alert("是否忘记输入登录名？");
91. document.userfrm.sname.focus();
92. return false
93. }
94. return true;
95.}
96.//Validate password
97.function passCheck(){
98.var userpass = document.userfrm.pass.value;
99.var ruserpass = document.userfrm.rpass.value;
100.var illegalChars = /[\W_]/;// allow only charactors and numbers
101. // Check if Password field is blank.
102. if(userpass == "" || ruserpass == ""){
103. alert("未输入密码 \n" + "请输入密码");
104. document.userfrm.pass.focus();
105. return false;
106. }
107. // Check if password length is less than 6 charactor.
108. if(userpass.length < 6){
109. alert("密码必须多于或等于 6 个字符。\n");
110. document.userfrm.pass.focus();
111. return false;
112. }
113. //check if password contain illigal charactors.
114. else if(illegalChars.test(userpass)){
115. alert("密码包含非法字符");
116. document.userfrm.pass.select();
117. return false;
118. }
119.
120. else if(userpass != ruserpass){
121. alert("密码不符");
122. document.userfrm.rpass.select();
123. return false;
124. }
125. return true;
126.}
127.
128.// Email Validation
129.function emailcheck(){
130.var usermail = document.userfrm.email.value;
131.
132. if(usermail.length == "0"){
133. alert("Email 文本框为空")
134. document.userfrm.email.focus();
135. return false;
136. }
137. if( usermail.indexOf("@") < 0 || usermail.indexOf(".") < 0 || usermail.indexOf("@") > usermail.indexOf(".")){
138.
139. alert("Email 地址无效");
140. return false;
141. }
142. return true;
143.}
144.
145.function bdaycheck(){
146.var bmonth = document.userfrm.bmon.value;
147.var bday = document.userfrm.bday.value;
148.var byear = document.userfrm.byear.value;
149.//alert(bmonth + "/" + bday + "/" + byear);
150. if(bmonth == "" || bday == "" || byear == "" || bday=="dd" || byear == "yyyy"){
151. alert("请输入您的生日");
152. document.userfrm.bmon.focus();
153. return false;
154. }
155.
156. for(i=0; i<bday.length; i++){
157. var bnum = bday.substring(i,i+1)
158. if(!(bnum < 9 || bnum > 0)){
159. alert("生日无效");
160. document.userfrm.bday.focus();
161. return false;
162. }
163. }
164.
165. for(j=0; j<byear.length; j++){
166. var bynum = byear.substring(j,j+1)
167. if(!(bynum < 9 || bynum > 0)){
168. alert("生日无效");
169. document.userfrm.byear.focus();
170. return false;
171. }
172. }
173. //验证出生年月日是否在指定的范围内
174. if (byear<1900||byear>2120){
175. alert("您输入的出生年份超出范围！\n请重新输入！");
176. document.userfrm.byear.focus();
177. return(false);
178. }
179. else
180. if(bmonth<0||bmonth>12){
181. alert("您输入的月份超出范围！\n请重新输入！");
182. document.userfrm.bmon.focus();
183. return(false);
184. }
185. else
186. if(bday<0||bday>31){
187. alert("您输入的日期超出范围!\n请重新输入！");
188. return(false);
189. }
190.
191. return true;
192.}
193.//check sex
194.function genderCheck(){
195.var usergen = document.userfrm.gen.length;
196. for(i=0;i<usergen;i++){
197. if(document.userfrm.gen[i].checked){
198. return true;
199. }
200. if (i==usergen-1){
201. alert("请选择性别");
202. return false;
203. }
204. }
205. return true;
206.}
207.function agree( )
208.{
209. if (document.userfrm.okradio[0].checked==false)
210. {
211. alert("您必须同意淘宝网的协议！才能加入会员");
212. return false;
213. }
214. else
215. return true;
216.}
217.</SCRIPT>
218.
219.<TABLE width="950" border="0" align="center">
220. <TR>
221. <TD height="75"><h4>注册步骤： 1.填写信息　>　 2.收电子邮件　>　3.注册成功 </h4></TD>
222. </TR>
223.</TABLE>
224.
225.<TABLE width="950" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#99CCFF">
226. <FORM name="userfrm" method="post" action="register_success.htm" onSubmit="return validateform( )">
227. <TR class="register_table_line">
228. <TD width="160" align="right" bgcolor="#E7FBFF">名字：</TD>
229. <TD width="507" align="left" bordercolor="#E7E3E7"><INPUT name&