用户注册验证

来源：互联网发布：vim node inspector 编辑：程序博客网时间：2024/05/16 12:07

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>注册页面验证</title><script language="javascript" src="Untitled-2.js"></script><link href="Untitled-3.css" rel="stylesheet" type="text/css" /></head><body><div id="register"><form action="" method="post" onsubmit="return checkForm()"><div id="bgMail"><label class="lable">电子邮件</label><input type="text" onblur="restore('bgMail');checkMail();" onfocus="heightLight('bgMail')" name="mail" id="mail" class="inp" /><span id="mailError"></span></div><div id="bgName"><label class="lable">用户名</label><input type="text" onblur="restore('bgName');checkName();" onfocus="heightLight('bgName')" name="username" id="username" class="inp"/><span id="nameError"></span></div><div id="bgPassword"><label class="lable">登录密码</label><input type="password" onblur="restore('bgPassword');checkPassWord();" onfocus="heightLight('bgPassword')" name="password" id="password" class="inp" /><span id="pwdError"></span></div>

<div id="bgCPassword"><label class="lable">确认密码</label><input type="password" onblur="restore('bgCPassword');checkCpwd();" onfocus="heightLight('bgCPassword')" name="cpassword" id="cpassword" class="inp" /><span id="cpasswordError"></span></div><div><input type="submit" value="确认提交" class="btnSubmit" /></div></form></div></body></html>

/* CSS Document */#register{width:500px;margin:50px auto;font-size:12px;}.inp{width:220px;height:30px;float:left;border:1px solid #0099ff;}div{width:500px;height:50px;padding-top:10px;padding-left:10px;}.lable{display:block;width:60px;height:20px;padding-top:15px;text-align:left;float:left;}.current{border:1px solid #00ccff;background-color:#99ffcc;}span{padding-top:5px;padding-left:5px;font-size:15px;}.btnSubmit{width:150px;height:25px;margin-left:80px;}.focusStyle{border:1px solid #00ccff;background-color:#99ffcc;}.blurStyle{border:0px;background-color:#FFFFFF;}

// JavaScript Documentfunction heightLight(id)//文本选中开样式{document.getElementById(id).style.borderWidth="1px";document.getElementById(id).style.borderColor="#00ccff";document.getElementById(id).style.borderStyle="solid";document.getElementById(id).style.backgroundColor="#99ffcc";}function checkForm ()//(提交前)总的验证方法{if(checkMail()&&checkName()&&checkPassWord()&&checkCpwd()){return true;}return false;}function $(id)//获取对象元素的函数{return document.getElementById(id);}function restore(id)//文本框离开样式{document.getElementById(id).style.borderWidth="0px";document.getElementById(id).style.backgroundColor="white";}function checkMail()//验证邮箱{var mailPattern=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;var mail=$("mail").value;if(!mailPattern.test(mail))//以正则表达式模式(调用test(字符串)方法)返回true 或false{$("mailError").innerHTML="电子邮件格式不正确";//调用函数(通过ID获取元素对象)输出文本信息$("mailError").style.color="red";//调用函数(通过ID获取元素对象)设置边框样式return false;}$("mailError").innerHTML="电子邮件格正确";$("mailError").style.color="green";return true;}function checkName()//验证用户名{var namePattern=/^\w{5,20}$/;var username=$("username").value;//调用函数(通过ID获取元素对象的值)if(!namePattern.test(username))                                                   {$("nameError").innerHTML="用户名格式不正确";$("nameError").style.color="red";return false;}$("nameError").innerHTML="用户名格式正确";$("nameError").style.color="green";return true;}function checkPassWord()//验证密码{var PwdPattern=/^[a-zA-Z0-9]{6,16}$/;var password=$("password").value;if(!PwdPattern.test(password))                                                   {$("pwdError").innerHTML="用户名密码不正确";$("pwdError").style.color="red";return false;}$("pwdError").innerHTML="用户密码正确";$("pwdError").style.color="green";return true;}function checkCpwd()//验证二次密码{var CPwdPattern=/^[a-zA-Z0-9]{6,16}$/;var cpassword=$("cpassword").value;var password=$("password").value;if(!CPwdPattern.test(cpassword))                                                   {$("cpasswordError").innerHTML="密码输入不正确";$("cpasswordError").style.color="red";return false;}elseif(cpassword!=password){$("cpasswordError").innerHTML="密码不一致";$("cpasswordError").style.color="red";return false;}$("cpasswordError").innerHTML="确认密码正确";$("cpasswordError").style.color="green";return true;}

0 0