我们经常会遇到这样的需求，今天用原生js来实现。
实现思路：
1、布局，通过div层将 用户名输入，密码输入、确认密码输入，垂直排列
用户名、输入框、提示分别用Label、input、span,
要注意的是Label、input、span都是行级元素，需要转换成块级元素进行宽高设置。
布局的图：如下
2.根据布局分层次设置布局的样式
3.JS里实现button的点击事件，通过JS，DOM操作获取input的值，进行验证。
代码实现:
register.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="register.css" type="text/css">
<script type="text/javascript" src="register.js"></script>
</head>
<Script></Script>
<body class="body">
<div class="nav" >
<div class="navitem">
<label class="label" >用户名:</label>
<input class="registerinput" type="text" id="register_name" />
<span class="register_error" id="register_name_error" >请输入字母和数字</span>
</div>
<div class="navitem" >
<label class="label" >密码:</label>
<input class="registerinput" type="password" id="password" />
<span class="register_error" id="password_error" >请输入数字密码</span>
</div>
<div class="navitem">
<label class="label" >确认密码:</label>
<input class="registerinput" type="password" id="affirmpassword" />
<span class="register_error" id="affirm_password_error" >请输入确认密码</span>
</div>
<div class="navbtn" >
<Button class="myBtn" id="myBtn" type="button" >注册</Button>
</div>
</div>
</body>
</html>
register.css:
.body{background-color: azure}
.nav { text-align: center;margin: 180px 500px 60px 500px; border: 1px;}
.navitem{margin: 20px 0; }
.label{display:inline-block; width:100px; line-height: 44px; color: #999; text-align: left; }
.registerinput{display:inline-block;width:200px;text-align: left; box-sizing: border-box; padding: 10px 0; border: 0;background-color: #ededed}
.register_error{display:inline-block; width:200px;text-align: left;margin-left: 10px;}
.navbtn{margin-top: 60px}
.myBtn{width: 200px;height:40px; background-color: #ededed;border: 0}
register.js:
/**
* Created by Administrator on 2017/3/31.
*/
window.onload=function () {//页面加载后执行
document.getElementById("myBtn").onclick=function(){changetext()};
function changetext()
{
var regpassword = new RegExp("^[0-9]*$");
var regloginName = new RegExp("^[0-9a-zA-z]*$");
var login_name=document.getElementById(‘register_name‘).value;
var password=document.getElementById(‘password‘).value;
var affirmpassword=document.getElementById(‘affirmpassword‘).value;
var login_name_error=document.getElementById(‘register_name_error‘);
var password_error=document.getElementById(‘password_error‘);
var affirm_password_error=document.getElementById(‘affirm_password_error‘);
//重置验证提示信息
login_name_error.innerHTML="";
login_name_error.style.color="black"
password_error.innerHTML="";
password_error.style.color="black"
affirm_password_error.innerHTML="";
affirm_password_error.style.color="black"
console.log(login_name);
console.log(password);
console.log(affirmpassword);
if(login_name.length==0){
login_name_error.innerHTML="登录名不能为空";
login_name_error.style.color="red";
return;
}
if(!regloginName.test(login_name)){
login_name_error.innerHTML="登录名必须是数字或字母";
login_name_error.style.color="red";
return;
}
if(password.length==0){
password_error.innerHTML="密码不能为空";
password_error.style.color="red";
return;
}
if(affirmpassword.length==0){
affirm_password_error.innerHTML="确认密码不能为空";
affirm_password_error.style.color="red";
return;
}
if(!regpassword.test(password)){
password_error.innerHTML="密码请输入数字";
password_error.style.color="red";
return;
}
if(password.length>6){
password_error.innerHTML="密码不能超过6位";
password_error.style.color="red";
return;
}
if(password!==affirmpassword){
password_error.innerHTML="两次密码输入必须相同";
password_error.style.color="red";
return;
}
alert(‘注册成功‘);
}
}
时间： 2024-10-08 15:02:54