今天我们通过实现用户注册页面验证来学习js当中的正则表达式的构造
1.题目：正则表达式实现用户注册页面验证 。
在各文本框中输入信息，在文本框失去焦点时，验证信息，如果输入的信息部满足要求，则提示信息输入有误。每个文本框的具体信息如下：
用户名：由英文字母、数字、下划线组成，长度为6-15个字符，并且以英文字母开头
密码：由英文字母和数字组成，长度6-15。
邮箱地址：包含@和.符号，且以.com或者.cn结尾.
手机号码：11位数字，且以1开头
出生日期：年份在1900-，以yyyy-mm-dd格式
具体实现
2.定义$(elementId)函数根据id获取元素
function $(elementId){ //获取id为XXXX的元素
return document.getElementById(elementId);
}
3.定义验证用户名的函数
//用户名由英文字母和数字组成的4-16位字符，以字母开头
function checkUser(){
var user=$("user").value; //获取用户名输入框的值
var userId=$("user_prompt"); //获取用户名提示的元素
var reg=/^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
if(!reg.test(user)){
userId.innerHTML="用户名不符合要求";
return false;
}
return true;
}
4.定义验证密码函数
//密码由4-10位字符组成
function checkPwd(){
var pwd=$("pwd").value;
var pwdId=$("pwd_prompt");
var reg=/^[a-zA-Z0-9]{4,10}$/;
if(!reg.test(pwd)){
pwdId.innerHTML="密码长度必须在4-10之间";
return false;
}
return true;
}
5.定义验证确认密码函数
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;
}
6.定义验证邮箱地址函数
//邮箱地址必须包含@和.,地址以.com或.cn借结束
function checkEmail(){
var email=$("email").value; //获取邮箱地址输入框的值
var email_prompt=$("email_prompt");
var reg=/^\w+@\w+\.(com)$|(cn)$/;
if(!reg.test( email)){
email_prompt.innerHTML="邮箱地址格式不正确";
return false;
}
return true;
}
7.定义验证手机号码函数
//手机号码为11位数字，且必须以1开头
function checkMobile(){
var mobile=$("mobile").value;
var mobileId=$("mobile_prompt");
var regMobile=/^1\d{10}$/;
if(!regMobile.test(mobile)){
mobileId.innerHTML="手机号码不正确，请重新输入";
return false;
}
return true;
}
8.定义验证出生日期
//出生日期年份在1900-之间，生日按1980-05-12或1988-05-04格式
function checkBirth(){
var birth=$("birth").value;
var birthId=$("birth_prompt");
var reg=/^((19\d{2})|(20[0-1]\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;
if(!reg.test(birth)){
birthId.innerHTML="生日格式不正确，如1980-5-12或1988-05-04";
return false;
}
birthId.innerHTML="";
return true;
}
举报/反馈
