任务视频
知识点
1.什么是正则表达式
正则表达式是一个描述字符模式的对象，它是由一些特殊的符号组成的，这些符号和SQL Server中学过的通配符一样，其组成的字符模式用来匹配各种表达式。
RegExp对象是RegularExpression（正则表达式）的缩写，它是对字符串执行模式匹配的强大工具。简单的模式可以是一个单独的字符，复杂的模式包括了更多的字符，例如验证电子邮箱地址、电话号码、出生日期等字符串。
定义正则表达式有两种构造形式，一种是普通方式，一种是构造函数的方式。
（1）普通方式
普通方式可以通过在一对分隔符之间放入表达式模式的各种组件来构造一个正则表达式，其语法如下：
var reg=/表达式/附加参数
（2）构造函数
构造函数方式的语法如下：
var reg=new RegExp(“表达式”,”附加参数”)；
2.正则表达式的操作方法
| 方法 | 描述 |
| compile | 编译正则表达式 |
| exec | 检索字符串中指定的值。返回找到的值，并确定其位置。 |
| test | 检索字符串中指定的值。返回 true 或 false。 |
3.正则表达式的模式
（1）．简单模式
简单模式是指通过普通字符的组合来表达的模式，例如：
var reg=/abc0d/;
可见简单模式只能表示具体的匹配，如果要匹配一个邮箱地址或一个电话号码，就不能使用具体的匹配，这时就要用到复合模式。
（2）．复合模式
复合模式是指含有通配符来表达的模式，例如：
var reg=/a+b?\w/;
其中的+、?和\w都属于通配符，代表着特殊的含义。因此复合模式可以表达更为抽象化的逻辑。
正则表达式常用字符含义：
| 符号 | 描述 |
| /…/ | 代表一个模式的开始和结束 |
| ^ | 匹配字符串的开始 |
| $ | 匹配字符串的结束 |
| \s | 任何空白字符 |
| \S | 任何非空白字符 |
| \d | 匹配一个数字字符，等价于[0-9] |
| \D | 除了数字之外的任何字符，等价于[^0-9] |
| \w | 匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_] |
| \W | 任何非单字字符，等价于[^a-zA-z0-9_] |
| . | 除了换行符之外的任意字符 |
使用正则表达式验证注册页面
任务描述
使用正则表达式改善任务3.5，制作严谨的表单验证页面。具体要求：
1.用户名只能由英文字母和数字组成，长度为4-16个字符，并且以英文字母开头
2.密码由英文字母和数字组成，长度为4-10个字符
3.邮箱地址要包含@符号和.符号，且.符号在@符号后，两个符号之间至少有一个字符，邮箱地址以com或cn结束
4.手机号为11位数字，以1开头
5.生日的年份在1900-2014之间，生日按1980-5-12或1988-05-04 格式填写
任务分析
1. 定义满足需求的正则表达式。
2. 使用正则表达式的方法验证用户输入的信息是否正确
3. 根据判断返回相应信息。
任务实现
1. 定义验证函数
（1）由于页面需要多次获取文本框的值，所以定义函数$用于简化获取页面元素对象。
//该函数作用是根据id获取页面元素
function $(elementId){
return document.getElementById(elementId); }
（2）定义验证用户名输入的函数，参考代码如下。
/*用户名验证*/
function checkUser(){
var user=$("user").value;
var userId=$("user_prompt");
userId.innerHTML="";
//用户名由英文字母和数字组成的4-16位字符，以字母开头
var reg=/^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
if(reg.test(user)==false){
userId.innerHTML="用户名不正确";
returnfalse;
}
return true;
}
（3）定义验证密码的函数，参考代码如下。
/*密码验证*/
function checkPwd(){
var pwd=$("pwd").value;
var pwdId=$("pwd_prompt");
pwdId.innerHTML="";
//密码由4-10位字符组成
var reg=/^[a-zA-Z0-9]{4,10}$/;
if(reg.test(pwd)==false){
pwdId.innerHTML="密码长度在4-10之间";
returnfalse;
}
return true;
}
密码验证中checkRepwd()函数与任务3.4一样此处不重复。
（4）定义验证邮箱地址的函数，参考代码如下。
/*验证邮箱*/
function checkEmail(){
var email=$("email").value;
var email_prompt=$("email_prompt");
email_prompt.innerHTML="";
//邮箱地址必须包含@符号和.符号，且.符号必须在@符号后，邮箱地址以com或cn结束
var reg=/^\w+@\w+\.\w+[(com)|(cn)]$/;
if(reg.test(email)==false){
email_prompt.innerHTML="Email格式不正确，例如web@sohu.com";
returnfalse;
}
return true;
}
（5）定义验证手机号码函数，参考代码如下。
/*验证手机号码*/
function checkMobile(){
varmobile=$("mobile").value;
varmobileId=$("mobile_prompt");
//手机号码为11位数字，且以1开头
varregMobile=/^1\d{10}$/;
if(regMobile.test(mobile)==false){
mobileId.innerHTML="手机号码不正确，请重新输入";
returnfalse;
}
mobileId.innerHTML="";
returntrue;
（6）定义验证出生日期的函数，参考代码如下。
/*生日验证*/
function checkBirth(){
varbirth=$("birth").value;
varbirthId=$("birth_prompt");
varreg=/^((19\d{2})|(200\d)|(201[0-4]))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;
if(reg.test(birth)==false){
birthId.innerHTML="生日格式不正确，例如1980-5-12或1988-05-04";
returnfalse;
}
birthId.innerHTML="";
returntrue;
}
说明：
（1）正则表达式是一种特殊的字符，所以在构造正则表达式时要按字符进行构造，对于出生日期的正则表达式要按取值范围进行构造。
var reg=/^((19\d{2})|(200\d)|(201[0-4]))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/。
（2）年份范围1900-2014，所以正则表达式分三种情况：
（3）月份范围1-12，也可以将1-9月表示为01-09，所以正则表达式分二种情况：
01-09或1-9的正则表达式为0?[1-9]
10-12的正则表达式为1[0-2]
（4）日期范围1-31，也可以将1-9表示为01-09，所以正则表达式分三种情况：
2.调用函数
函数调用与任务3.5一样，此处不重复。
案例素材
根据所给素材制作注册页面，使用正则表达式验证页面数据的有效性，要求如下：
使用表单form的onsubmit事件，根据验证函数的返回值是tru或false来决定是否提示表单。
用户名不能为空，长度为4-12个字符，并且用户名只能由字母、数字和下划线组成。
密码长度为6-12个字符，两次输入的密码必须一致。
必须选择性别。
电子邮箱地址不能为空，并且必须包含字符“@”和“.”。
出生日期用代码生成，年份范围为1900-当前年份，月份范围为1-12，日范围为1-31。
错误提示信息显示在对应表单元素的后面，例如，若用户名不正确时，在文本框后进行提示
参考答案
