JS综合案例
JS综合案例
实现基础的表单验证：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>欢迎注册title>
<link href="css/register.css" rel="stylesheet">
head>
<body>
<div class="form-div">
<div class="reg-content">
<h1>欢迎注册h1>
<span>已有帐号？span> <a href="#">登录a>
div>
<form id="reg-form" action="#" method="get" >
<table>
<tr>
<td>用户名td>
<td class="inputs">
<input name="username" type="text" id="username" onblur="checkUsername()">
<br>
<span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎span>
td>
tr>
<tr>
<td>密码td>
<td class="inputs">
<input name="password" type="password" id="password" onblur="checkPassword()">
<br>
<span id="password_err" class="err_msg" style="display: none">密码格式有误span>
td>
tr>
<tr>
<td>手机号td>
<td class="inputs"><input name="tel" type="text" id="tel" onblur="checkTel()">
<br>
<span id="tel_err" class="err_msg" style="display: none">手机号格式有误span>
td>
tr>
table>
<div class="buttons">
<input value="注 册" type="submit" id="reg_btn">
div>
<br class="clear">
form>
div>
<script>
//1. 验证 用户名是否符合规则：长度 6~12,单词字符组成
//绑定事件：失去焦点事件 onblur="checkUsername()"
checkUsername=function(){
//1.1获取用户名输入框的input标签对象
let usernameInput = document.getElementById("username");
//1.2获取用户名输入框对应的值
let username= usernameInput.value;
//1.3书写对应的正则验证规则
//通过new RegExp("正则表达式")创建正则对象
let reg=/^\w{6,12}$/;
// let reg1=new RegExp("^\\w{6,12}$");
//1.4验证用户名是否符合规则
let flag=reg.test(username);
//1.5如果不符合规则则显示错误信息
if(!flag){
document.getElementById("username_err").style.display="block";
//1.6阻止表单提交
return false;
}else{
//1.7符合规则则隐藏错误信息
document.getElementById("username_err").style.display="none";
return true;
}
}
//2. 验证 密码是否符合规则:长度 6~12任意字符
//绑定事件：失去焦点事件 onblur="checkPassword()"
function checkPassword(){
//2.1获取密码输入框的input标签对象
let passwordInput = document.getElementById("password");
//2.2获取密码输入框对应的值
let password= passwordInput.value;
//2.3书写对应的正则验证规则
let reg=/^.{6,12}$/;
//2.4验证密码是否符合规则
let flag=reg.test(password);
//2.5如果不符合规则则显示错误信息
if(!flag){
document.getElementById("password_err").style.display="block";
//2.6阻止表单提交
return false;
}else{
//2.6符合规则则隐藏错误信息
document.getElementById("password_err").style.display="none";
return true;
}
}
//3. 验证 手机号是否符合规则：长度 11，数字组成，第一位是1
//绑定事件：失去焦点事件 onblur="checkTel()"
function checkTel(){
//3.1获取手机号输入框的input标签对象
let telInput = document.getElementById("tel");
//3.2获取手机号输入框对应的值
let tel= telInput.value;
//3.3书写对应的正则验证规则
let reg=/^1\d{10}$/;
//3.4验证手机号是否符合规则
let flag=reg.test(tel);
//3.5如果不符合规则则显示错误信息
if(!flag){
document.getElementById("tel_err").style.display="block";
//3.6阻止表单提交
return false;
}else{
//3.6符合规则则隐藏错误信息
document.getElementById("tel_err").style.display="none";
return true;
}
}
//4. 表单是否可以提交
//绑定事件：表单提交事件 onsubmit="checkForm()"
// function checkForm(){
// //由于上述表单输入框的三个function都有相应的返回值，所以可以通过&&来判断三个输入框是否都符合规则
// return checkUsername()&&checkPassword()&&checkTel();
// }
document.getElementById("reg-form").onsubmit=function(){
return checkUsername()&&checkPassword()&&checkTel();
}
script>
body>
html>
register.css
* {
margin: 0;
padding: 0;
list-style-type: none;
}
.reg-content{
padding: 30px;
margin: 3px;
}
a, img {
border: 0;
}
body {
background-image: url("../imgs/reg_bg_min.jpg") ;
text-align: center;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td, th {
padding: 0;
height: 90px;
}
.inputs{
vertical-align: top;
}
.clear {
clear: both;
}
.clear:before, .clear:after {
content: "";
display: table;
}
.clear:after {
clear: both;
}
.form-div {
background-color: rgba(255, 255, 255, 0.27);
border-radius: 10px;
border: 1px solid #aaa;
width: 424px;
margin-top: 150px;
margin-left:1050px;
padding: 30px 0 20px 0px;
font-size: 16px;
box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);
text-align: left;
}
.form-div input[type="text"], .form-div input[type="password"], .form-div input[type="email"] {
width: 268px;
margin: 10px;
line-height: 20px;
font-size: 16px;
}
.form-div input[type="checkbox"] {
margin: 20px 0 20px 10px;
}
.form-div input[type="button"], .form-div input[type="submit"] {
margin: 10px 20px 0 0;
}
.form-div table {
margin: 0 auto;
text-align: right;
color: rgba(64, 64, 64, 1.00);
}
.form-div table img {
vertical-align: middle;
margin: 0 0 5px 0;
}
.footer {
color: rgba(64, 64, 64, 1.00);
font-size: 12px;
margin-top: 30px;
}
.form-div .buttons {
float: right;
}
input[type="text"], input[type="password"], input[type="email"] {
border-radius: 8px;
box-shadow: inset 0 2px 5px #eee;
padding: 10px;
border: 1px solid #D4D4D4;
color: #333333;
margin-top: 5px;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
border: 1px solid #50afeb;
outline: none;
}
input[type="button"], input[type="submit"] {
padding: 7px 15px;
background-color: #3c6db0;
text-align: center;
border-radius: 5px;
overflow: hidden;
min-width: 80px;
border: none;
color: #FFF;
box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
}
input[type="button"]:hover, input[type="submit"]:hover {
background-color: #5a88c8;
}
input[type="button"]:active, input[type="submit"]:active {
background-color: #5a88c8;
}
.err_msg{
color: red;
padding-right: 170px;
}
#password_err,#tel_err{
padding-right: 195px;
}
#reg_btn{
margin-right:50px; width: 285px; height: 45px; margin-top:20px;
}