表单验证实例

最新推荐文章于 2018-08-21 11:29:25 发布

恩洛

最新推荐文章于 2018-08-21 11:29:25 发布

阅读量279

点赞数

分类专栏： javascript

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input{
            outline: none;
        }
    </style>
</head>
<body>
<form action="">
    <p>用户名<input type="text" name="username" id="usernameInp" flag="0"></p>
    <p>密码<input type="password" name="password" id="passwordInp" flag="0"></p>
    <p>重复密码<input type="password" name="repassword" id="repasswordInp" flag="0"></p>
    <p>电话<input type="text" name="tel" id="telInp" flag="0"></p>
    <p>邮箱<input type="text" name="email" id="emailInp" flag="0"></p>
    <input type="submit" id="btn">
</form>
<script>
    function getById(a) {
        return document.getElementById(a);
    }
    var usernameInp = getById('usernameInp'),
        passwordInp = getById('passwordInp'),
        repasswordInp = getById('repasswordInp'),
        telInp = getById('telInp'),
        emailInp = getById('emailInp');

    function check(a,that) {
        var val = that.value;
        if(val){
            /*var reg = /^[\w-]{6,18}$/;*/
            var reg = null;
            switch (a){
                case 'username':reg=/^[\w-]{3,18}$/;break;
                case 'password':reg=/^[\w-]{6,18}$/;break;
                case 'tel':reg=/^1[35678]\d{9}$/;break;
                case 'email':reg=/^\w+@[0-9a-zA-Z]{2,16}\.[a-zA-Z]{2,4}(\.[a-zA-Z]{2,4})?$/;break;
            }
            var res = reg.test(val);
            if(res){
                that.style.border = '1px solid green';
                that.setAttribute('flag','1');
            }else{
                that.style.border = '1px solid red';
                that.setAttribute('flag','0');
            }
        }
    }

    /*用户名验证
    usernameInp.οnblur=function () {
        var val=this.value;
        if(val){
            var reg=/^[\w-]{3,18}$/;
            var res=reg.test(val);
            if(res){
                this.style.border = '1px solid green';
                this.setAttribute('flag','1');
            }
            else{
                this.style.border = '1px solid red';
                this.setAttribute('flag','0');
            }
        }
    };*/
    usernameInp.onblur = function () {
        check('username',this);
    };
    passwordInp.onblur = function () {
        check('password',this);
    };
    telInp.onblur = function () {
        check('tel',this);
    };
    emailInp.onblur = function () {
        check('email',this);
    };
    //确认密码验证
    repasswordInp.onblur = function () {
        var val = passwordInp.value;
        var val1 = this.value;
        if(val){
            if(val===val1){
                this.style.border = '1px solid green';
                this.setAttribute('flag','1');
            }else{
                this.style.border = '1px solid red';
                this.setAttribute('flag','0');
            }
        }
    };
//    提交验证
//    form.οnsubmit=function () {
    btn.onclick = function () {
        if(!usernameInp.value){
            usernameInp.style.border = '1px solid red';
            return false;//阻止表单提交
        }else if(!passwordInp.value){
            passwordInp.style.border = '1px solid red';
            return false;
        }else if(!repasswordInp.value){
            repasswordInp.style.border = '1px solid red';
            return false;
        }else if(!telInp.value){
            telInp.style.border = '1px solid red';
            return false;
        }else if(!emailInp.value){
            emailInp.style.border = '1px solid red';
            return false;
        }else{
            var num = Number(usernameInp.getAttribute('flag'))+Number(passwordInp.getAttribute('flag'))+Number(repasswordInp.getAttribute('flag'))+Number(telInp.getAttribute('flag'))+Number(emailInp.getAttribute('flag'));
            if(num<5){
                return false;
            }
        }
    }
</script>
</body>
</html>