<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="js.css">
<style>
body{
background: url("../image/wallhaven-1.png") no-repeat center;
padding-top: 25px;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.rg_layout{
border: #EEEEEE 8px solid;
width: 900px;
height: 500px;
background-color:white;
/* 水平居中 */
margin: auto;
margin-top: 100px;
}
.rg_left{
float: left;
margin: 15px;
}
.rg_left > p:first-child{
font-size: 20px;
color: rgb(247, 194, 2);
padding-left: 3px;
}
.rg_left > p:last-child{
font-size:20PX;
color: #A6A6A6;
padding-left: 3px;
}
.rg_center{
float: left;
margin-left: 35px;
margin-top: 15px;
}
.rg_right{
float: right;
margin: 15px;
}
.rg_right > p{
font-size: 15px;
}
.rg_right p a{
color: pink;
}
.td_left{
text-align: right;
width: 100px;
height: 45px;
}
.td_right{
padding-left:50px;
}
#userName,#password,#email,#name,#telphone,#birthday,#checkcode{
height: 30px;
width: 250px;
padding-left: 15px;
/* 设置边框圆角 */
border-radius: 5px;
border: 1px #A6A6A6 solid;
}
#checkcode{
width: 120px;
}
#image{
/* 垂直居中 */
vertical-align:middle;
height: 32px;
margin-left: 10px;
}
#button{
background-color: rgb(247, 194, 2);
width: 120px;
height: 33px;
border: 1px solid rgb(247, 194, 2);
}
.button{
padding-left: 20px;
padding-top: 10px;
}
.check{
height: 30px;
width: 250px;
padding-left: 5px;
font-size: 13px;
}
#td_sub{
padding-left: 150px;
}
</style>
<script>
/*
分析：
1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
如果都为true，，则监听器方法返回true。
如果有一个为false，则监听器方法返回false。
2.定义一些方法分别各个校验各个表单项。
3.给各个表单项绑定onblur事件。
*/
window.onload = function(){
//1.给表单绑定onsubmit事件
document.getElementById("form").onsubmit = function () {
return checkUserName() && checkpassWord();
}
//绑定离焦事件
document.getElementById("userName").onblur = checkUserName;
document.getElementById("password").onblur = checkpassWord;
}
//2.校验用户名
function checkUserName () {
//1.获取用户名的 值
var userName = document.getElementById("userName").value;
//2.定义正则表达式
var reg_userName = /^\w{6,12}$/;
//3.判断用户名值是否符合正则表达式的规则
var flag = reg_userName.test(userName);
//4.提示信息
var s_userName = document.getElementById("s_userName");
if(flag){
//提示绿色对勾
s_userName.innerHTML = " √";
}else{
//提示红色用户名有错
s_userName.innerHTML = "用户名格式有误";
}
return flag;
}
//2.校验密码
function checkpassWord () {
//1.获取密码的 值
var password = document.getElementById("password").value;
//2.定义正则表达式
var reg_passWord = /^\w{6,12}$/;
//3.判断用户名值是否符合正则表达式的规则
var flag = reg_passWord.test(password);
//4.提示信息
var s_passWord = document.getElementById("s_passWord");
if(flag){
//提示绿色对勾
s_passWord.innerHTML = " √";
}else{
//提示红色用户名有错
s_passWord.innerHTML = "密码格式有误";
}
return flag;
}
</script>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISITER</p>
</div>
<div class="rg_center">
<div class="rg">
<form action ="#" method="get" id="form">
<table>
<tr>
<td class="td_left"><label for="userName">用户名</label></td>
<td class="td_right"><input type="text" name="userName" id="userName" placeholder="请输入用户名" >
<span id="s_userName" class="check"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="passWord">密码</label></td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">
<span id="s_passWord" class="check"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="Email" name="email" id="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="Name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="telphone">手机号</label></td>
<td class="td_right"><input type="text" name="tel" id="telphone" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left">性别</td>
<td class="td_right">
<input type="radio" name="sex" value="male"> 男
<input type="radio" name="sex" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday"></td>
</tr>
<tr>
<td class="td_left"><label for="checkcode">验证码</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode">
<image id="image" src="../image/yzm.png" height="30px" >
</td>
</tr>
<tr>
<td class="button" colspan="2" id="td_sub">
<input type="submit" value="注册" id="button">
</td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<P>已有账号<a href="#">立即登录</a></P>
</div>
</div>
</body>
</html>
这里的return checkUserName() && checkpassWord(); 为什么是 && ，而且并没有加if语句，如果改成 == 我还能理解。
window.onload = function(){
//1.给表单绑定onsubmit事件
document.getElementById("form").onsubmit = function () {
return checkUserName() && checkpassWord();
}
//绑定离焦事件
document.getElementById("userName").onblur = checkUserName;
document.getElementById("password").onblur = checkpassWord;
}
