验证邮箱、用户名、密码等
html代码:
<div class="register_message">
<form action="" method="post" id="myform" οnsubmit="return checkRegister()">
<dl class="register_row">
<dt>Email地址:</dt>
<dd>
<input id="email" type="text" class="register_input" onFocus="emailFocus()" onBlur="emailBlur()"/>
</dd>
<dd><div id="email_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>设置昵称:</dt>
<dd>
<input id="nickName" type="text" class="register_input" onFocus="nickNameFocus()" onBlur="nickNameBlur()"/>
</dd>
<dd><div id="nickName_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>设定密码:</dt>
<dd>
<input id="pwd" type="password" class="register_input" onFocus="pwdFocus()" onBlur="pwdBlur()"/>
</dd>
<dd><div id="pwd_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>再输入一次密码:</dt>
<dd><input id="repwd" type="password" class="register_input" onFocus="repwdFocus()" onBlur="repwdBlur()"/></dd>
<dd><div id="repwd_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>性别:</dt>
<dd><input name="sex" id="man" type="radio" value="男" checked="checked"/> <label for="man">男</label></dd>
<dd> <input name="sex" id="woman" type="radio" value="女"/> <label for="woman">女</label></dd>
</dl>
<div class="registerBtn"><input id="registerBtn" type="image" src="images/register_btn_out.gif"/></div>
</form>
</div>
JS代码:
<script>
// JavaScript Document
/*鼠标在email文本框中时*/
function emailFocus(){
var email=document.getElementById("email");//定义一个email对象
var promptId=document.getElementById("email_prompt");
email.className="register_input register_input_Focus";
promptId.className="register_prompt";
}
/*鼠标离开email文本框中时*/
function emailBlur(){
var email=document.getElementById("email");
var promptId=document.getElementById("email_prompt");
promptId.innerHTML="";
var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/; //正则表达式
if(email.value==""){
promptId.innerHTML="电子邮件是必填项,请输入您的Email地址";
promptId.className="register_prompt_error";
email.className="register_input register_input_Blur";
return false;
}
if(reg.test(email.value)==false){
promptId.innerHTML="电子邮件格式不正确,请重新输入";
promptId.className="register_prompt_error";
email.className="register_input register_input_Blur";
return false;
}
promptId.className="register_prompt_ok";
email.className="register_input";
return true;
}
/*鼠标在昵称文本框中时*/
function nickNameFocus(){
var nickName=document.getElementById("nickName");
var nickNameId=document.getElementById("nickName_prompt");
nickName.className="register_input register_input_Focus";
nickNameId.innerHTML="昵称可由大小写英文字母、数字组成,长度为4-20个字符";
nickNameId.className="register_prompt";
}
/*鼠标离开昵称文本框中时*/
function nickNameBlur(){
var nickName=document.getElementById("nickName");
var nickNameId=document.getElementById("nickName_prompt");
nickNameId.innerHTML="";
var reg=/^[a-zA-Z0-9]{4,20}$/;
if(nickName.value==""){
nickNameId.innerHTML="昵称为必填项,请输入您的昵称";
nickNameId.className="register_prompt_error";
nickName.className="register_input register_input_Blur";
return false;
}
if(reg.test(nickName.value)==false){
nickNameId.innerHTML="昵称格式错误,请用大小写英文字母、数字,长度4-20个字符";
nickNameId.className="register_prompt_error";
nickName.className="register_input register_input_Blur";
return false;
}
nickNameId.className="register_prompt_ok";
nickName.className="register_input";
return true;
}
/*鼠标在密码文本框中时*/
function pwdFocus(){
var pwd=document.getElementById("pwd");
var pwdId=document.getElementById("pwd_prompt");
pwd.className="register_input register_input_Focus";
pwdId.innerHTML="密码可由大小写英文字母、数字组成,长度6-20个字符";
pwdId.className="register_prompt";
}
/*鼠标离开密码文本框中时*/
function pwdBlur(){
var pwd=document.getElementById("pwd");
var pwdId=document.getElementById("pwd_prompt");
pwdId.innerHTML="";
var reg=/^[a-zA-Z0-9]{6,20}$/;
if(pwd.value==""){
pwdId.innerHTML="密码为必填项,请设置您的密码";
pwdId.className="register_prompt_error";
pwd.className="register_input register_input_Blur";
return false;
}
if(reg.test(pwd.value)==false){
pwdId.innerHTML="密码格式错误,请用大小写英文字母、数字,长度6-20个字符";
pwdId.className="register_prompt_error";
pwd.className="register_input register_input_Blur";
return false;
}
pwdId.className="register_prompt_ok";
pwd.className="register_input";
return true;
}
/*鼠标在再输入一次密码文本框中时*/
function repwdFocus(){
var repwd=document.getElementById("repwd");
repwd.className="register_input register_input_Focus";
}
/*鼠标离开再输入一次密码文本框中时*/
function repwdBlur(){
var pwd=document.getElementById("pwd");
var repwd=document.getElementById("repwd");
var repwdId=document.getElementById("repwd_prompt");
repwdId.innerHTML="";
if(repwd.value==""){
repwdId.innerHTML="请再次输入您的密码";
repwdId.className="register_prompt_error";
repwd.className="register_input register_input_Blur";
return false;
}
if(pwd.value!=repwd.value){
repwdId.innerHTML="两次输入密码不一致,请重新输入";
repwdId.className="register_prompt_error";
repwd.className="register_input register_input_Blur";
return false;
}
repwdId.className="register_prompt_ok";
repwd.className="register_input";
return true;
}
/*单击提交注册页面时,对页面内容进行验证*/
function checkRegister(){
emailBlur();
nickNameBlur();
pwdBlur();
repwdBlur();
var flagEmail=emailBlur();
var flagNickName=nickNameBlur();
var flagPwd=pwdBlur();
var flagRepwd=repwdBlur();
if(flagEmail==true &&flagNickName==true &&flagPwd==true &&flagRepwd==true){
return true;
}
else{
return false;
}
}
/*当鼠标放在提交注册按钮上时,按扭样式*/
function btn_over(){
document.getElementById("registerBtn").src="images/register_btn_over.gif";
}
/*当鼠标离开提交注册按钮上时,按扭样式*/
function btn_out(){
document.getElementById("registerBtn").src="images/register_btn_out.gif";
}
</script>