第178天：表单验证

Posted 2020-10-25 半指温柔乐

1、css代码

  1 CSS代码
  2 
  3 @charset "gb2312";
  4 /* CSS Document */
  5 
  6 body,dl,dt,dd,div,form {padding:0;margin:0;}
  7 
  8 #header,#main{
  9     width:650px;
 10     margin:0 auto;
 11     }
 12 .bg{
 13     background-image:url(../images/register_bg.gif);
 14     background-repeat:no-repeat;
 15     width:6px;
 16     height:6px;
 17     }
 18     .bg_top_left{
 19         background-position:0px 0px;
 20         }
 21     .bg_top_right{
 22         background-position:0px -6px;
 23         }
 24     .bg_end_left{
 25         background-position:0px -12px;
 26         }
 27     .bg_end_right{
 28         background-position:0px -18px;
 29         }
 30     .bg_top{
 31         border-top:solid 1px #666666;
 32         }
 33     .bg_end{
 34         border-bottom:solid 1px #666666;
 35         }
 36     .bg_left{
 37         border-left:solid 1px #666666;
 38         }
 39     .bg_right{
 40         border-right:solid 1px #666666;
 41         }
 42 
 43 
 44 .content{
 45     padding:10px;
 46     }
 47     .inputs{
 48         border:solid 1px #a4c8e0;
 49         width:150px;
 50         height:15px;
 51     }
 52     
 53     .userWidth{
 54         width:110px;
 55         }
 56     .content div{
 57         float:left;
 58         font-size:12px;
 59         color:#000;
 60         }
 61     dl{
 62         clear:both;
 63         }
 64     dt,dd{
 65         float:left;
 66         }
 67     dt{
 68         width:130px;
 69         text-align:right;
 70         font-size:14px;
 71         height:30px;
 72         line-height:25px;
 73         }
 74     dd{
 75         font-size:12px;
 76         color:#666666;
 77         width:180px;
 78         }
 79 /*当鼠标放到文本框时，提示文本的样式*/
 80 .import_prompt{
 81     border:solid 1px #ffcd00;
 82     background-color:#ffffda;
 83     padding-left:5px;
 84     padding-right:5px;
 85     line-height:20px;
 86     }
 87 /*当文本框内容不符合要求时，提示文本的样式*/
 88 .error_prompt{
 89     border:solid 1px #ff3300;
 90     background-color:#fff2e5;
 91     background-image:url(../images/li_err.gif);
 92     background-repeat:no-repeat;
 93     background-position:5px 2px;
 94     padding:2px 5px 0px 25px;
 95     line-height:20px;
 96     }
 97 /*当文本框内容输入正确时，提示文本的样式*/
 98 .ok_prompt{
 99     border:solid 1px #01be00;
100     background-color:#e6fee4;
101     background-image:url(../images/li_ok.gif);
102     background-repeat:no-repeat;
103     background-position:5px 2px;
104     padding:2px 5px 0px 25px;
105     line-height:20px;
106     }

2、javascript

  1 // JavaScript Document
  2 
  3 /*通过ID获取html对象的通用方法，使用$代替函数名称*/
  4 function $(elementId){
  5     return document.getElementById(elementId);
  6     }
  7     
  8 /*当鼠标放在通行证用户名文本框时，提示文本及样式*/    
  9 function userNameFocus(){
 10     var userNameId=$("userNameId");
 11     userNameId.className="import_prompt";
 12     userNameId.innerHTML="1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或结尾，且长度为4-18";
 13     }
 14     
 15 /*当鼠标离开通行证用户名文本框时，提示文本及样式*/    
 16 function userNameBlur(){
 17     var userName=$("userName");
 18     var userNameId=$("userNameId");
 19     var reg=/^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/;
 20     if(userName.value==""){
 21         userNameId.className="error_prompt";
 22         userNameId.innerHTML="通行证用户名不能为空，请输入通行证用户名";
 23         return false;
 24         }
 25     if(reg.test(userName.value)==false){
 26         userNameId.className="error_prompt";
 27         userNameId.innerHTML="1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或结尾，且长度为4-18";
 28         return false;
 29         }
 30         userNameId.className="ok_prompt";
 31         userNameId.innerHTML="通行证用户名输入正确";
 32         return true;
 33     }
 34 
 35 /*当鼠标放在密码文本框时，提示文本及样式*/    
 36 function pwdFocus(){
 37     var pwdId=$("pwdId");
 38     pwdId.className="import_prompt";
 39     pwdId.innerHTML="密码长度为6-16";
 40     }
 41     
 42 /*当鼠标离开密码文本框时，提示文本及样式*/    
 43 function pwdBlur(){
 44     var pwd=$("pwd");
 45     var pwdId=$("pwdId");
 46     if(pwd.value==""){
 47         pwdId.className="error_prompt";
 48         pwdId.innerHTML="密码不能为空，请输入密码";
 49         return false;
 50         }
 51     if(pwd.value.length<6 || pwd.value.length>16){
 52         pwdId.className="error_prompt";
 53         pwdId.innerHTML="密码长度为6-16";
 54         return false;
 55         }
 56         pwdId.className="ok_prompt";
 57         pwdId.innerHTML="密码输入正确";
 58         return true;
 59     }
 60 
 61     
 62 /*当鼠标离开重复密码文本框时，提示文本及样式*/    
 63 function repwdBlur(){
 64     var repwd=$("repwd");
 65     var pwd=$("pwd");
 66     var repwdId=$("repwdId");
 67     if(repwd.value==""){
 68         repwdId.className="error_prompt";
 69         repwdId.innerHTML="重复密码不能为空，请重复输入密码";
 70         return false;
 71         }
 72     if(repwd.value!=pwd.value){
 73         repwdId.className="error_prompt";
 74         repwdId.innerHTML="两次输入的密码不一致，请重新输入";
 75         return false;
 76         }
 77         repwdId.className="ok_prompt";
 78         repwdId.innerHTML="两次密码输入正确";
 79         return true;
 80     }
 81     
 82 /*当鼠标放在昵称文本框时，提示文本及样式*/    
 83 function nickNameFocus(){
 84     var nickNameId=$("nickNameId");
 85     nickNameId.className="import_prompt";
 86     nickNameId.innerHTML="1、包含汉字、字母、数字、下划线以及@!#$%&*特殊字符<br/>2、长度为4－20个字符<br/>3、一个汉字占两个字符";
 87     }
 88     
 89 /*当鼠标离开昵称文本框时，提示文本及样式*/    
 90 function nickNameBlur(){
 91     var nickName=$("nickName");
 92     var nickNameId=$("nickNameId");
 93     var k=0;
 94     var reg=/^([\u4e00-\u9fa5]|\w|[@!#$%&*])+$/;   // 匹配昵称
 95     var chinaReg=/[\u4e00-\u9fa5]/g;   //匹配中文字符
 96     if(nickName.value==""){
 97         nickNameId.className="error_prompt";
 98         nickNameId.innerHTML="昵称不能为空，请输入昵称";
 99         return false;
100         }
101     if(reg.test(nickName.value)==false){
102         nickNameId.className="error_prompt";
103         nickNameId.innerHTML="只能由汉字、字母、数字、下划线以及@!#$%&*特殊字符组成";
104         return false;
105         }
106     
107     var len=nickName.value.replace(chinaReg,"ab").length;  //把中文字符转换为两个字母，以计算字符长度
108     if(len<4||len>20){
109         nickNameId.className="error_prompt";
110         nickNameId.innerHTML="1、长度为4－20个字符<br/>2、一个汉字占两个字符";
111         return false;
112         }
113     
114         nickNameId.className="ok_prompt";
115         nickNameId.innerHTML="昵称输入正确";
116         return true;
117     }    
118 
119 /*当鼠标放在关联手机号文本框时，提示文本及样式*/    
120 function telFocus(){
121     var telId=$("telId");
122     telId.className="import_prompt";
123     telId.innerHTML="1、手机号码以13，15，18开头<br/>2、手机号码由11位数字组成";
124     }
125     
126 /*当鼠标离开关联手机号文本框时，提示文本及样式*/    
127 function telBlur(){
128     var tel=$("tel");
129     var telId=$("telId");
130     var reg=/^(13|15|18)\d{9}$/;
131     if(tel.value==""){
132         telId.className="error_prompt";
133         telId.innerHTML="关联手机号码不能为空，请输入关联手机号码";
134         return false;
135         }
136     if(reg.test(tel.value)==false){
137         telId.className="error_prompt";
138         telId.innerHTML="关联手机号码输入不正确，请重新输入";
139         return false;
140         }
141         telId.className="ok_prompt";
142         telId.innerHTML="关联手机号码输入正确";
143         return true;
144     }    
145 
146 
147 /*当鼠标放在保密邮箱文本框时，提示文本及样式*/    
148 function emailFocus(){
149     var emailId=$("emailId");
150     emailId.className="import_prompt";
151     emailId.innerHTML="请输入您常用的电子邮箱";
152     }
153     
154 /*当鼠标离开保密邮箱文本框时，提示文本及样式*/    
155 function emailBlur(){
156     var email=$("email");
157     var emailId=$("emailId");
158     var reg=/^\[email protected]\w+(\.[a-zA-Z]{2,3}){1,2}$/;
159     if(email.value==""){
160         emailId.className="error_prompt";
161         emailId.innerHTML="保密邮箱不能为空，请输入保密邮箱";
162         return false;
163         }
164     if(reg.test(email.value)==false){
165         emailId.className="error_prompt";
166         emailId.innerHTML="保密邮箱格式不正确，请重新输入";
167         return false;
168         }
169         emailId.className="ok_prompt";
170         emailId.innerHTML="保密邮箱输入正确";
171         return true;
172     }    
173 
174 /*表单提交时验证表单内容输入的有效性*/
175 function checkForm(){
176       var flagUserName=userNameBlur();
177       var flagPwd=pwdBlur();
178       var flagRepwd=repwdBlur();
179       var flagNickName=nickNameBlur();
180       var flagTel=telBlur();
181       var flagEmail=emailBlur();
182       
183       userNameBlur();
184       pwdBlur();
185       repwdBlur();
186       nickNameBlur();
187       telBlur();
188       emailBlur();
189       
190       if(flagUserName==true &&flagPwd==true &&flagRepwd==true &&flagNickName==true&&flagTel==true&flagEmail==true){
191           return true;
192           }
193         else{
194             return false;
195             }
196     
197     }

3、html

 1 !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=gb2312" />
 5 <title>新用户注册页面</title>
 6 <link type="text/css" rel="stylesheet" href="css/register.css" />
 7 <script type="text/javascript" src="js/register.js"></script>
 8 </head>
 9 
10 <body>
11 <div id="header"><img src="images/register_logo.gif" alt="logo"/></div>
12 <div id="main">
13  <table width="100%" border="0" cellspacing="0" cellpadding="0">
14   <tr>
15     <td class="bg bg_top_left"></td>
16     <td class="bg_top"></td>
17     <td class="bg bg_top_right"></td>
18   </tr>
19   <tr>
20     <td class="bg_left"></td>
21     <td class="content">
22       <form action="" method="post" name="myform" onsubmit="return checkForm()">
23         <dl>
24           <dt>通行证用户名：</dt>
25           <dd><input type="text" id="userName" class="inputs userWidth" onfocus="userNameFocus()" onblur="userNameBlur()" /> @163.com</dd>
26           <div id="userNameId"></div>
27         </dl>
28          <dl>
29           <dt>登录密码：</dt>
30           <dd><input type="password" id="pwd" class="inputs"  onfocus="pwdFocus()" onblur="pwdBlur()"/></dd>
31           <div id="pwdId"></div>
32         </dl>
33          <dl>
34           <dt>重复登录密码：</dt>
35           <dd><input type="password" id="repwd" class="inputs"  onblur="repwdBlur()"/></dd>
36           <div id="repwdId"></div>
37         </dl>
38         <dl>
39           <dt>性别：</dt>
40           <dd><input name="sex" type="radio" value="" checked="checked"/>男 <input name="sex" type="radio" value="" />女 </dd>
41         </dl>
42         <dl>
43           <dt>真实姓名：</dt>
44           <dd><input type="text" id="realName" class="inputs" onblur="aa()" /></dd>
45         </dl>
46         <dl>
47           <dt>昵称：</dt>
48           <dd><input type="text" id="nickName" class="inputs"  onfocus="nickNameFocus()" onblur="nickNameBlur()"/></dd>
49           <div id="nickNameId"></div>
50         </dl>
51         <dl>
52           <dt>关联手机号：</dt>
53           <dd><input type="text" id="tel" class="inputs"  onfocus="telFocus()" onblur="telBlur()" /></dd>
54           <div id="telId"></div>
55         </dl>
56         <dl>
57           <dt>保密邮箱：</dt>
58           <dd><input type="text" id="email" class="inputs" onfocus="emailFocus()" onblur="emailBlur()" /></dd>
59           <div id="emailId"></div>
60         </dl>
61         <dl>
62           <dt></dt>
63           <dd><input name=" " type="image" src="images/button.gif"/></dd>
64         </dl>
65       </form>
66     </td>
67     <td class="bg_right"></td>
68   </tr>
69   <tr>
70      <td class="bg bg_end_left"></td>
71     <td class="bg_end"></td>
72     <td class="bg bg_end_right"></td>
73   </tr>
74 </table>
75 
76 </div>
77 </body>
78 <script type="text/javascript">
79     function aa(){
80         
81         var reg = /^[\u4e00-\u9fa5]$/;
82         var name = document.getElementById("realName").value;
83         
84         if(reg.test(name)==false){
85             alert("只能为汉字");
86         }else{
87             alert("正确");    
88         }
89             
90     }
91 </script>
92 
93 </html>