使用js制作注册页面,使用正则表达式验证该数据是否符合要求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<div class="box" id="box">
<h2>注册</h2>
<!--请求方式设置为get-->
<form id="form" action="" method="get">
<ul>
<li>
<label><span>*</span>用户名:</label>
<!--设置输入框的提示信息-->
<input type="text" name="username" placeholder="只能输入6-20个字母、数字、下划线" id="username" />
</li>
<li>
<label><span>*</span>电子邮箱:</label>
<input type="text" name="email" placeholder="输入正确的电子邮箱地址" id="email" />
</li>
<li>
<label><span>*</span>密码:</label>
<!--输入类型设置为密码类型-->
<input type="password" name="pwd" placeholder="由字母开头,包含字母、数字、下划线,6-16位" id="pwd" />
</li>
<li>
<!--设置行内元素标签-->
<label><span>*</span>确认密码:</label>
<input type="password" name="pwdOk" placeholder="确认密码必须与密码一致" id="pwdOk" />
</li>
</ul>
<!--绑定表单提交方法-->
<button type="button" onclick="formSubmit()">提交</button>
</form>
</div>
</body>
</html>
css页面
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
input{
border:0;
}
.clear:after{
content: "";
display: block;
clear: both;
}
.box{
width: 500px;
margin:30px auto;
padding:30px 40px;
border:1px solid #ddd;
box-shadow: 0 0 10px #bbb;
box-sizing: border-box;
}
.box h2{
text-align: center;
color:#666;
font-size: 22px;
line-height: 40px;
}
.box form{
padding:15px 0;
}
.box form ul li{
display: flex;
height: 40px;
line-height: 40px;
margin-bottom: 15px;
}
.box form ul li input{
border:1px solid #ddd;
height: 38px;
padding:0 10px;
line-height: 38px;
flex:1;
box-sizing: border-box;
}
.box form ul li label{
display: block;
width: 120px;
}
.box form ul li label span{
color:red;
padding-right:10px;
}
.box form button{
width: 100%;
border:none;
height: 40px;
background-color: green;
color:#fff;
}
js页面
//自定义验证用户名的方法
function validate_strLenght(str){
var regExp=/^(\w){6,20}$/;
return regExp.test(str);
}
//自定义验证email方法
function validate_email(str){
var regExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
return regExp.test(str);
}
//自定义验证密码的方法
function validate_pwd(str){
var regExp=/^[a-zA-Z]\w{5,15}/;
return regExp.test(str);
}
//根据表单控件的id填写
var username=document.getElementById("username");
//通过id获取元素
var email=document.getElementById("email");
//根据表单控件pwd的id填写
var pwd=document.getElementById("pwd");
var pwdOk=document.getElementById("pwdOk");
//通过标签名获取元素
var form=document.getElementsByTagName("form")[0];
//表单提交
function formSubmit(){
//使用自定义方法验证用户名、验证邮箱
if(validate_strLenght(username.value)&&validate_email(email.value)&&validate_pwd(pwd.value)&&checkOk()){
//调用表单提交方法
document.getElementById("form").submit() ;
alert("登录成功");
}else{
//控制台输出
console.log("验证失败");
}
}
//检查用户名
username.onblur=function(){
if(validate_strLenght(username.value)){
console.log("用户名符合要求");
}else{
console.log("用户名不符合要求");
}
}
//检查email
email.onblur=function(){
if(validate_email(email.value)){
console.log("邮箱格式符合要求");
}else{
console.log("邮箱格式不符合要求");
}
}
//密码框失去焦点的时候
pwd.onblur=function(){
if(validate_pwd(pwd.value)){
console.log("密码符合要求");
}else{
console.log("密码不符合要求");
}
}
function checkOk(){
if(pwd.value==pwdOk.value){
console.log("密码与重复密码一致");
return true;
}else{
console.log("密码与重复密码不一致");
return false;
}
}
pwdOk.onkeyup=checkOk;