登陆表单验证简单实现

时间 2019-12-08
标签登陆表单验证简单实现栏目 HTML 繁體版
原文原文链接
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实现带样式的表单验证
 </title>
    <style>
table{width:700px}
/*父元素下的第1个，第n个，最后一个td子元素*/td:first-child{width:60px}
/*IE不支持nth-child*/td:nth-child(2){width:200px}
/*IE*/td:first-child+td{width:200px}
/*IE不支持--能够靠总宽度来调节 td:last-child{width:340px}*/td span{color:red}
        .vali_Info{/* 页面初始，验证消息不显示*/display:none;}
        .txt_focus{border-top:2px solid black;border-left:2px solid black;}
        .vali_success,.vali_fail{background-repeat:no-repeat;background-position:left center;display:block;font-size:12px;}
/* 验证消息：验证经过时的样式*/
 .vali_success{background-image:url("img/ok.png");padding-left:20px;width:0px;height:20px;overflow:hidden;}
/* 验证消息：验证失败时的样式*/
 .vali_fail{background-image:url("img/warning.png");border:1px solid red;background-color:#ddd;color:Red;padding-left:30px;}
    </style>
</head>
<body>
<form>
    <h2>增长管理员</h2>
    <table>
        <tr>
            <td >姓名：</td>
            <td><input name="userName"/>
                <span>*</span>
            </td>
            <td>
                <div class="vali_Info">
10个字符之内的字母、数字和下划线的组合
 </div>
            </td>
        </tr>
        <tr>
            <td>密码：</td>
            <td>
                <input type="password" name="pwd"/>
                <span>*</span>
            </td>
            <td>
                <div class="vali_Info">6位数字</div>
            </td>
        </tr>
        <tr>
            <td></td>
            <td colspan="2">
                <input type="submit" value="保存"/>
                <input type="reset" value="重填"/>
            </td>
        </tr>
    </table>
</form>
<script>
window.$=HTMLElement.prototype.$=function(selector){
return (this==window?document:this).querySelectorAll(selector);
    }

var form = document.forms[0];
var txtName =form.elements['userName'];
var txtPwd = form.elements['pwd'];

txtName.onfocus=txtPwd.onfocus = function(){
this.className="txt_focus";
this.parentNode.parentNode.$('div')[0].removeAttribute('class');    // div.className=""
 }

function valName(){
this.className="";
var div = this.parentNode.parentNode.$('div')[0];
var  r=/^\w{1,10}$/.test(this.value);
div.className = r?"vali_success":"vali_fail";
return r;
    }
function valPwd(){
this.className="";
var div = this.parentNode.parentNode.$('div')[0];
var reg = /^[0-9]{6}$/;
var r=reg.test(this.value)
div.className = r?"vali_success":"vali_fail";
return r;
    }
txtName.onblur=valName;
txtPwd.onblur=valPwd;
form.onsubmit = function(){
//都执行完，即便有报错都显示出来
//var  r = txtName.onblur()&txtPwd.onblur();
        //一个出错后不执行
var  r = txtName.onblur()&&txtPwd.onblur();
if(!r){
var e  = window.event ||arguments[0];
if(e.preventDefault){
e.preventDefault();
            }else {
e.returnValue=false;
            }
        }else {
window.open('http://www.baidu.com')
        }
    }
</script>
</body>
</html>