JS实现常规登录验证_常规登录判断js-CSDN博客

本文链接：https://blog.csdn.net/qq_42853241/article/details/89462935

表单对象：（属于DOM对象的子对象）

找到对象：
document.getElementById()
document.forms.username
document.frm1.username
属性：（本身表单有的属性，都可以是对象的属性）
action：表单数据的处理程序
method：表单的提交方式GET、POST
enctype：表单数据的编码方式（加密）
方法
submit()：提交表单
focus()：获取焦点
事件：
onfocus()：当获得焦点时执行的事件
onblur()：当失去焦点时执行的事件
onchange()：内容改变触发

验证：前后台都需要验证

form上有个onsubmit()：提交事件，当单击提交按钮时发生的事件。在数据传到服务器之前

HTML代码：

<head>
    <style type="text/css">
        .stats1{
            color: #aaa;
        }
        .stats2{
            color: #000;
        }
        .stats3{
            color: red;
        }
        .stats4{
            color:green;
        }
    </style>
</head>
<body>
<form action="" method="post" onsubmit="return rpg('click')">
    username:<input type="text" name="username" value="" >
    <span class="stats1">请输入用户名</span>
    <br>
    password:<input type="password" name="password" value="" />
    <span class="stats1">请输入密码</span><br>
    repass:<input type="password" name="repass" value="" />
    <span class="stats1">请确认密码</span><br>
    email:<input type="text" name="email" value="" />
    <span class="stats1">请输入邮箱</span><br>
    other:<input type="text" name="other" value="" />
    <span class="stats1">请输入其他</span><br>
    submit:<input type="submit" name="sub" value="submit" />
</form>
<script src="yanzheng.js"></script>
</body>
</html>

JS代码：

function getSpan(obj) {   //获取下一个span
    while(true) {
        if (obj.nextSibling.nodeName != "SPAN") {
            obj = obj.nextSibling;
        } else {
            return obj.nextSibling
        }
    }
}
function check(obj,info,fun,click){   //检查方法
    obj.onfocus=function () {
        var sp=getSpan(obj);
        sp.innerHTML=info;
        sp.className="stats2";
    }
    obj.onblur=function () {
        var sp=getSpan(obj);
        if (fun(this.value)) {
            sp.innerHTML="输入正确";
            sp.className="stats4";
        }else{
            sp.innerHTML=info;
            sp.className="stats3";
        }
    }
    if (click=="click") {
        obj.onblur();
    }
}
onload=rpg;//页面加载完自动调用

function rpg(click) {
    var stat=true;
    var username=document.getElementsByName("username")[0];
    var password=document.getElementsByName("password")[0];
    var repass=document.getElementsByName("repass")[0];
    var email=document.getElementsByName("email")[0];
    var other=document.getElementsByName("other")[0];
    check(username,"用户名的长度在3~20之间",function (val) {
        if(val.match(/^\S+$/)&&val.length>=3&&val.length<=20)
            return true;
        else
            stat=false;
            return false;
    },click);
    check(password,"密码长度为6~20",function (val) {
        if(val.match(/^\S+$/)&&val.length>=6&&val.length<=20)
            return true;
        else
            stat=false;
            return false;
    },click);
    check(repass,"确认密码一致",function (val) {
        if(val.match(/^\S+$/)&&val.length>=6&&val.length<=20&&val==password.value)
            return true;
        else
            stat=false;
            return false;
    },click);
    check(email,"遵循邮箱规则写法",function (val) {
        if(val.match(/\w+@\w+\.\w/))
            return true;
        else
            stat=false;
            return false;
    },click);
    check(password,"密码长度为6~20",function (val) {
        if(val.match(/^\S+$/)&&val.length>=6&&val.length<=20)
            return true;
        else
            stat=false;
            return false;
    }.click);
    return stat;
}