第178天：表单验证
本文共 9152 字，大约阅读时间需要 30 分钟。
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、由字母、数字、下划线、点、减号组成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、由字母、数字、下划线、点、减号组成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、包含汉字、字母、数字、下划线以及@!#$%&*特殊字符2、长度为4－20个字符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个字符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开头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=/^\w+@\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 3 4 5新用户注册页面 6 7 8 9 10 1112
1377 78 92 9314
75 7615 1916 17 18 20 6921 22 66 6768 70 7471 72 73
转载地址：http://wvmml.baihongyu.com/
你可能感兴趣的文章
在线算法&离线算法
查看>>
Android屏幕适配研究
查看>>
WP7 ArcGIS 地图
查看>>
【Django笔记三】Django2.0配置mysql模型
查看>>
常用Matlab函数
查看>>
查看linux系统时间和时区
查看>>
html5_______9.10
查看>>
通过继承来实现注解方式的属性注入
查看>>
swipejs的bug
查看>>
浅谈UML的概念和模型之UML九种图
查看>>
hibernate投影查询
查看>>
main方法的理解
查看>>
封闭解(Closed-form solution)、解析解(Analytical solution)、数值解(Numerical solution) 释义...
查看>>
南阳理工学院OJ_106_背包问题
查看>>
meta 标签
查看>>
UVa12465
查看>>
【转载】程序员的职业素养
查看>>
第一章：Android系统移植和驱动开发简述
查看>>
python学习第一天
查看>>
js弹框 背景遮罩
查看>>