JavaScript 登录注册表单验证
JavaScript 表单验证
·
1. 验证用户名是否符合规则（idea2021 CTRL+R 修改替换）
1.1 获取用户名的输入框1.2 绑定onblur事件 》》》 当元素失去焦点时发生此事件
1.3 获取用户在username输入框中输入的信息，排除掉空白字符
1.4 判断username的值是否符合规则
2. 验证密码是否符合规则（idea2021 CTRL+R 修改替换）
2.1 获取密码的输入框2.2 绑定onblur事件 》》》 当元素失去焦点时发生此事件
2.3 获取用户在password输入框中输入的信息，排除掉空白字符
2.4 判断password的值是否符合规则
3. 验证手机号是否符合规则（idea2021 CTRL+R 修改替换）
3.1 获取手机号的输入框3.2 绑定onblur事件 》》》 当元素失去焦点时发生此事件
3.3 获取用户在tel输入框中输入的信息，排除掉空白字符
3.4 判断tel的值是否符合规则
4.form表单的提交
4.1获取表单的对象4.2为表单对象绑定onsubmit
html文件代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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">
<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">
<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">
<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>
</body>
</html>JavaScript文件代码（HTML文件中没有引用，自己引用就好了）
<script>
//1. 验证用户名是否符合规则
//1.1 获取用户名的输入框
var username = document.getElementById("username");
//1.2 绑定onblur事件 》》》 当元素失去焦点时发生此事件
username.onblur =judgeUserName;
function judgeUserName(){
//1.3 获取用户在username输入框中输入的信息，排除掉空白字符
var usernameValue = username.value.trim();
//1.4 判断username的值是否符合规则
var flag = usernameValue.length>=6&&usernameValue.length<=12;
if (flag){
document.getElementById("username_err").style.display="none";
}else{
document.getElementById("username_err").style.display="";
}
return flag;
}
//2. 验证密码是否符合规则（CTRL+R 修改替换）
//2.1 获取密码的输入框
var password = document.getElementById("password");
//2.2 绑定onblur事件 》》》 当元素失去焦点时发生此事件
password.onblur =judgePassword;
function judgePassword(){
//2.3 获取用户在password输入框中输入的信息，排除掉空白字符
var passwordValue = password.value.trim();
//2.4 判断password的值是否符合规则
var flag = passwordValue.length>=6&&passwordValue.length<=12;
if (flag){
document.getElementById("password_err").style.display="none";
}else{
document.getElementById("password_err").style.display="";
}
return flag;
}
//3. 验证手机号是否符合规则
//3.1 获取手机号的输入框
var tel = document.getElementById("tel");
//3.2 绑定onblur事件 》》》 当元素失去焦点时发生此事件
tel.onblur =judgeTel;
function judgeTel(){
//3.3 获取用户在tel输入框中输入的信息，排除掉空白字符
var telValue = tel.value.trim();
//3.4 判断tel的值是否符合规则
var flag = telValue.length ==11 ;
if (flag){
document.getElementById("tel_err").style.display="none";
}else{
document.getElementById("tel_err").style.display="";
}
return flag;
}
//4.form表单的提交
//4.1获取表单的对象
var regForm = document.getElementById("reg-form");
//4.2为表单对象绑定onsubmit
regForm.onsubmit = function (){
var flag = judgeUserName()&&judgePassword()&&judgeTel();
if (flag){
return true;
}else {
return false;
}
}
</script>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;
}图片自取：
效果：
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
14
0- 0
已为社区贡献9条内容
所有评论(0)