验证注册页面信息
任务描述
注册页面用户信息合法性的验证是JavaScript主要作用之一。设计如图3-6所示页面，各文本框输入信息在失去焦点时验证，如果输入有误，在文本框后面提示错误信息，各文本框输入信息的具体要求如下：
1. 用户名是由英文字母和数字组成的4-16位字符，以字母开头。加载页面时提示相应信息如图3-所示。
2. 密码由4-10位字符组成，加载页面时提示相应信息，密码和确认密码必须一致。
3.电子邮箱信息必须包含@符号和.符号，且@符号不能在第1位，必须在.符号前面。
4.手机号码必须是11位数字，且由1开头。
5. 生日按“1985-05-01”格式输入，输入的月在1-12之间，输入的日在1-31之间。
6. 单击注册完成按钮时如果页面信息输入正确则提交表单，否则不提交。
任务分析
要完成注册页面信息的验证，可以采用以下步骤：
1. 设计静态页面，应用CSS样式美化页面。给各文本框设置id属性，并在其后面添加div用于显示提示信息。
2. 获取表单元素值，这些值都是字符串类型。
3.使用字符串对象方法验证输入用户输入信息的合法性。
4. 表单提交时使用onsubmit事件触发验证函数。
因为文本框输入值是字符串类型，所以要验证表单信息输入的合法性，需要用到String对象的方法。
任务实现
1.定义验证函数
（1）由于页面需要多次获取文本框的值，所以定义函数$用于简化获取页面元素对象。
//该函数作用是根据id获取页面元素
function $(elementId){
return document.getElementById(elementId); }
（2）定义验证用户名输入的函数，参考代码如下。
/*用户名验证*/
function checkUser(){
varuser=$("user").value;
varuserId=$("user_prompt");
userId.innerHTML="";
if(user.length<4|| user.length>16)
{
userId.innerHTML="请输入4-16位用户名";
returnfalse;
}
for(vari=0;i<user.length;i++){
if(!isNaN(user.charAt(i))){
userId.innerHTML="用户名中不能包含数字";
returnfalse;
}
}
returntrue;
}
说明：
（1）id为user_prompt的div用于显示提示信息。
（2）for循环是将字符串的每个字符取出判断是否是数字，其中user.charAt(i)表示获取user字符串中第i个字符。
（3）定义验证密码的函数，参考代码如下。
/*密码验证*/
function checkPwd(){
var pwd=$("pwd").value;
var pwdId=$("pwd_prompt");
pwdId.innerHTML="";
if(pwd.length<4 || pwd.length>10)
{
pwdId.innerHTML="密码长度在4-10之间";
return false;
}
return true;
}
function checkRepwd(){
var repwd=$("repwd").value;
var pwd=$("pwd").value;
var repwdId=$("repwd_prompt");
repwdId.innerHTML="";
if(pwd!=repwd){
repwdId.innerHTML="两次输入的密码不一致";
return false;
}
return true;
}
（4）定义验证邮箱地址的函数，参考代码如下。
/*验证邮箱*/
function checkEmail(){
var email=$("email").value;
var email_prompt=$("email_prompt");
email_prompt.innerHTML="";
var index=email.indexOf("@",1);
if(index==-1){
email_prompt.innerHTML="输入的邮箱格式中应包含@符号";
returnfalse;
}
if(email.indexOf(".",index)==-1){
email_prompt.innerHTML="输入的邮箱格式中应包含.符号且在@符号后面";
returnfalse;
}
return true;
}
（5）定义验证手机号码函数，参考代码如下。
/*验证手机号码*/
function checkMobile(){
varmobile=$("mobile").value;
varmobileId=$("mobile_prompt");
mobileId.innerHTML="";
if(mobile.charAt(0)!=1)
{
mobileId.innerHTML="手机号开始位应该为1";
returnfalse;
}
for(vari=0;i<mobile.length;i++){
if(isNaN(mobile.charAt(i)))
{
mobileId.innerHTML="手机号码不能包含字符";
returnfalse;
}
}
returntrue;
}
（6）定义验证出生日期的函数，参考代码如下。
/*生日验证*/
function checkBirth(){
varbirth=$("birth").value;
varbirthId=$("birth_prompt");
birthId.innerHTML="";
if(birth.length!=10|| birth.charAt(4)!="-" || birth.charAt(7)!="-"){
birthId.innerHTML="出生日期输入格式不正确";
returnfalse;
}
varbirthdays=birth.split("-");
year=parseInt(birthdays[0],10);
month=parseInt(birthdays[1],10);
day=parseInt(birthdays[2],10);
varnow=new Date();
nowYear=now.getFullYear();
if(isNaN(year)|| isNaN(month) || isNaN(day)){
birthId.innerHTML="出生日期不能包含字符";
returnfalse;
}
if(year<1900|| year>nowYear)
{
birthId.innerHTML="出生年份输入有误";
returnfalse;
}
if(month<=0|| month>12)
{
birthId.innerHTML="出生月份输入有误";
returnfalse;
}
if(day<=0|| day>31)
{
birthId.innerHTML="出生日期输入有误";
returnfalse;
}
returntrue;
}
说明：
（1）birthdays=birth.split("-")是将用户输入的出生日期按“-”分割存放在birthdays数组中，其中数组中第一个元素是出生年份，第二个元素是出生月份，第三个元素是出生日。
（2）使用parseInt语句将年、月、日转换为数值，输入的年份应该不能大于当前年份。月份应该在1-12之间，出生日应该在1-31之间。
2.调用函数
各文本框在失去焦点时调用相应验证函数，在html代码中添加下列代码：
（1）<input id="user"type="text" onblur="checkUser()"/>
（2）<input id="pwd"type="password" onblur="checkPwd()"/>
（3）<input id="repwd"type="password" onblur="checkRepwd()"/>
（4）<input id="email"type="text" onblur="checkEmail()"/>
（5）<input id="mobile"type="text" onblur="checkMobile()"/>
（6）<input id="birth"type="text" onblur="checkBirth()"/>
