html表单验证邮箱表达式,Javascript正则表达式实现表单验证

今天我们通过实现用户注册页面验证来学习js当中的正则表达式的构造

1.题目：正则表达式实现用户注册页面验证 。

在各文本框中输入信息，在文本框失去焦点时，验证信息，如果输入的信息部满足要求，则提示信息输入有误。每个文本框的具体信息如下：

用户名：由英文字母、数字、下划线组成，长度为6-15个字符，并且以英文字母开头

密码：由英文字母和数字组成，长度6-15。

邮箱地址：包含@和.符号，且以.com或者.cn结尾.

手机号码：11位数字，且以1开头

出生日期：年份在1900-2019，以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-2019之间，生日按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;

}

举报/反馈