可能这个东西不是很难,但是我还是花了一些功夫,主要目的是判断input的输入,来动态显示input的兄弟节点span的显示内容。
核心方法就是“当前元素寻找父节点然后再通过选择器查找对应节点”;
this.parentNode.querySelector("css seletor").innerText;
上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html{-webkit-user-select: none;-user-select: none;}
body,input,div{font-family: "微软雅黑";}
.login{width: 60%;margin: 40px auto 30px;}
.login_panel{width: 80%;border-radius: 3px;border: 1px solid #B1B1B1;margin: 10px auto 10px;}
.login_panel h4{text-align: center;}
.inputBox{display: block;margin: 10px auto 10px 30px;text-align: left;}
.inputBox span:last-child{font-size: 10px;color: #EE3333;}
</style>
<script>
window.οnlοad=function(){
var username = document.querySelector("input[name=username]");
var email = document.querySelector("input[name=email]");
var pwd = document.querySelector("input[name=pwd]");
username.οnblur=function(){
if(username.value==""){
this.parentNode.querySelector("input+span").innerText="账号不能为空";
}else{
this.parentNode.querySelector("input+span").innerText="";
}
}
email.οnblur=function(){
if(email.value==""){
this.parentNode.querySelector("input+span").innerText="账号不能为空";
}else{
var pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
flag = pattern.test(email.value);
if(!flag){
this.parentNode.querySelector("input+span").innerText="邮箱格式不正确";
email.value="";
}else{
this.parentNode.querySelector("input+span").innerText="";
}
}
}
pwd.οnblur=function(){
var pwd_pat = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
flag = pwd_pat.test(pwd.value);
if(pwd.value==""){
this.parentNode.querySelector("input+span").innerText="账号不能为空";
}else if(!flag){
this.parentNode.querySelector("input+span").innerText="密码不符合要求";
pwd.value="";
}else{
this.parentNode.querySelector("input+span").innerText="";
}
}
/*继承方法*/
/*function judge(obj){
console.log(obj.name);
this.οnblur=function(){
if(obj.value=""){
this.parentNode.querySelector("input+span").innerText="账号不能为空";
}else if(obj.name==email){
var pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
var flag = pattern.test(email.value);
if(!flag){
this.parentNode.querySelector("input+span").innerText="邮箱格式不正确";
email.value="";
}else{
this.parentNode.querySelector("input+span").innerText="";
}
}else if(obj.name==pwd){
var pwd_pat = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
var flag = pwd_pat.test(pwd.value);
if(!flag){
this.parentNode.querySelector("input+span").innerText="密码不符合要求";
email.value="";
}else{
this.parentNode.querySelector("input+span").innerText="";
}
}
}
}*/
}
</script>
</head>
<body class="login">
<div class="login_panel">
<h4>用户登录</h4>
<div class="login_username inputBox">
<span>用户名:</span>
<input type="text" name="username" placeholder="请输入您的账号" οnblur="judge(this)">
<span></span>
</div>
<div class="login_mail inputBox">
<span>邮箱:</span>
<input type="mail" name="email" placeholder="您的邮箱" οnblur="judge(this)">
<span></span>
</div>
<div class="login_pwd inputBox">
<span>密码:</span>
<input type="password" name="pwd" placeholder="您的密码" οnblur="judge(this)">
<span></span>
</div>
</div>
</body>
</html>
最后有点美中不足的就是没有把它继承为一个函数,供三个input调用。如果有大神知道的话,跪求指点。