Posted in Javascript onNovember 15, 2013
register.html
<!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> <style type="text/css"> @import "css/userRegister.css"; </style> </head> <body id="BODY"> <div id="DIV_FORM"> <form method="post" action="url" > <table id="TABLE"> <tbody> <tr> <td>用户名：</td> <td> <input name="username" id="USERNAME" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/> </td> </tr> <tr> <td>密码：</td> <td> <input name="password" id="PASSWORD" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/> </td> </tr> <tr> <td>确认密码：</td> <td> <input name="password2" id="PASSWORD2" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/> </td> </tr> <tr> <td>身份证号：</td> <td> <input name="IDNumber" id="IDNUMBER" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/> </td> </tr> <tr> <td>电话号码：</td> <td> <input name="phoneNumber" id="PHONENUMBER" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/> </td> </tr> <tr> <td>Email：</td> <td> <input name="email" id="EMAIL" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/> </td> </tr> <tr> <td> </td> <td align="right"> <input type="submit" value="确认提交" /> </td> </tr> </tbody> </table> <table id="TABLE2" border="0"> <tr><td><span id="username">请输入用户名</span></td></tr> <tr><td><span id="password">请输入密码</span></td></tr> <tr><td><span id="password2">请再次输入密码</span></td></tr> <tr><td><span id="IDNumber">请输入身份证号码</span></td></tr> <tr><td><span id="phoneNumber">请输入电话号码</span></td></tr> <tr><td><span id="email">请输入邮箱地址</span></td></tr> </table> </form> </div> <script type="text/javascript" src="jslib/registerCheck.js"> </script> </body> </html>
registerCheck.js
//输入框获得焦点时，显示提示内容
function showDesc(obj)
{
var id= obj.name;
document.getElementById(id).style.display="inline";
}
//输入框失去焦点时检验输入内容是否有效
function checkText(obj)
{
//获取输入框的id值
var id= obj.name;
var text=document.getElementById(id.toString().toUpperCase()).value;
//判断是否为空
if(text.replace(/\s/g, "")=="")
{
document.getElementById(id).innerHTML="输入不能为空";
}
else
{
//组装方法
//取首字母转换为大写,其余不变
var firstChar=id.charAt(0).toString().toUpperCase();
//
var strsub=id.substring(1,id.length);
var strMethod="check"+firstChar+strsub+"()";
var isTrue = eval(strMethod);
if(isTrue)
{
document.getElementById(id).innerHTML="输入有效";
}
}
}
function checkUsername()
{
//只简单的判断用户名的长度
var id = document.getElementById("USERNAME");
var username=id.value;
if(username.length > 10)
{
document.getElementById(id.name).innerHTML = "输入的用户名过长";
return false;
}
else
return true;
}
function checkPassword()
{
var password = document.getElementById("PASSWORD").value;
return true;
}
function checkPassword2()
{
var id=document.getElementById("PASSWORD");
var id2=document.getElementById("PASSWORD2");
var password = id.value;
var password2 = id2.value;
if(password!=password2)
{
document.getElementById(id.name).innerHTML="密码不一致";
return false;
}
return true;
}
function checkIDNumber()
{
var id=document.getElementById("IDNUMBER");
var IDNumber =id.value;
if(IDNumber.length<18||IDNumber.length>19)
{
document.getElementById(id.name).innerHTML="身份证号长度有误";
return false;
}
var expr=/([0]{18}[x|y]?)|([1]{18}[x|y]?)/i;
if(expr.test(IDNumber))
{
document.getElementById(id.name).innerHTML="身份证号不可以全'0'或全'1'";
return false;
}
return true;
}
function checkPhoneNumber()
{
// 利用正则表达式对输入数据匹配
var id=document.getElementById("PHONENUMBER");
var phone = id.value;
//匹配到一个非数字字符，则返回false
var expr = /\D/i;
if(expr.test(phone))
{
document.getElementById(id.name).innerHTML="不能输入非数字字符";
return false;
}
return true;
}
function checkEmail()
{
// 利用正则表达式对输入数据匹配
var id = document.getElementById("EMAIL")
var email = id.value;
//以字母或数字开头，跟上@,字母数字以.com结尾
var expr = /^([0-9]|[a-z])+@([0-9]|[a-z])+(\.[c][o][m])$/i;
if(!expr.test(email))
{
document.getElementById(id.name).innerHTML="输入的邮箱格式有误";
return false;
}
return true;
}
CSS
@charset "utf-8";
/* CSS Document */
#BODY{
text-align:center;
}
#TABLE{
text-align:left;
margin: auto;
float:left;
}
#DIV_FORM{
margin-left:300px;
}
#TABLE2{
text-align:left;
width:150px;
height:150px;
}
#TABLE2 tr
{
height:24px;
}
#TABLE2 span{
display:none;
} js简单实现用户注册信息的校验代码
声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@