这是一个简单的注册页面,DOM事件onclick,onblur(失去焦点)。
大概写个简单的页面,包含手机号、输入密码、确认密码(其中密码可以显示或隐藏)。
当所有条件未成立的时候,将会显示填写信息有误。
关于图片的小建议:里面有睁眼和闭眼的图片,可以去阿里巴巴矢量图标库去自行下载,可以自行调整大小。
下面是完整代码部分:
HTML部分:
<div class="register">
<div class="tel-box">
手机号:<input class="box" id="tel" placeholder="请输入您的手机号" /><span id="tip">您的手机号码不合法!</span>
<img id="image" src="img/right.jpg" />
</div>
<br/>
<div class="pass">
登录密码:<input type="password" class="box" id="psd"placeholder="请输入登录密码" /><span id="psd_tip">密码的格式不正确!</span>
<!--默认隐藏-->
<label><img src="img/clo-eyes.jpg" id="eyes"></label>
</div>
<br/>
<div class="pass">
确认密码:<input type="password" class="box" id="psd_second"placeholder="请确认密码" /><span id="pswd_tip">与第一次密码不一致!</span>
<label><img src="img/clo-eyes.jpg" id="eyes"></label>
</div>
<div id="btn">注册</div>
</div>
css部分:
*{margin: 0;padding: 0;}
.register{margin: auto;width: 600px;height: 500px; padding-top: 100px;}
.box{width: 320px;height: 40px;}
.tel-box{padding-left: 16px;}
#btn{width: 320px; height: 40px; background: #5696ff; font-size: 18px; color: #fff;
line-height: 40px; margin-top: 18px; border-radius: 4px;margin-left: 83px;text-align: center;}
#tip,#image,#psd_tip,#pswd_tip{display: none;color: red;font-size:12px;}
.pass{position: relative;}
#eyes {width: 18px;position: absolute;top: 20px;right: 200px;}
JavaScript部分:
<script>
var tel=document.getElementById("tel");
var span=document.getElementById("tip");
var img=document.getElementById("image");
var tel_reg=/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/
var psd=document.getElementById("psd");
var psd_tip=document.getElementById("psd_tip")
var psd_reg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,8}$/
var psd_second=document.getElementById("psd_second");
var pswd_tip=document.getElementById("pswd_tip");
var input = document.querySelector("input");
var imgs = document.getElementById("eyes");
var btn=document.getElementById("btn");
//验证手机号
tel.onblur=function(){
if(tel_reg.test(tel.value)){
tip.style.display="none"
image.style.display="inline"
}else{
tip.style.display="inline"
image.style.display="none"
}
}
//验证密码
psd.onblur=function(){
if(psd_reg.test(psd.value)){
psd_tip.style.display="none"
}else{
psd_tip.style.display="inline"
};
if(psd_second.value===psd.value){
pswd_tip.style.display="none";
}else if(psd.value!=psd_second.value&&psd_second.value!=""){
pswd_tip.style.display="inline";
}
}
//验证二次密码
psd_second.onblur=function(){
if(psd_second.value==psd.value){
pswd_tip.style.display="none"
}else{
pswd_tip.style.display="inline"
}
}
//密码显示与隐藏
var flag = 0;
eyes[0].onclick = function () {
if (flag == 0) {
psd.type = "text";
eyes[0].src = "img/op-eyes.jpg";//显示
flag = 1;
} else {
psd.type = "password";
eyes[0].src = "img/clo-eyes.jpg";//隐藏
flag = 0;
}
}
var flag1 = 0;
eyes[1].onclick = function () {
if (flag1== 0) {
psd_second.type = "text";
eyes[1].src = "img/op-eyes.jpg";//显示
flag1 = 1;
} else {
psd_second.type = "password";
eyes[1].src = "img/clo-eyes.jpg";//隐藏
flag1 = 0;
}
}
//注册按钮
btn.onclick=function(){
if(tel_reg.test(tel.value)&&psd_reg.test(psd.value)&&psd_second.value==psd.value){
alert("注册成功")
}else{
alert("填写信息有误")
}
}
</script>
效果图:
到这里,一个简单的注册功能就完成啦~