js表单验证1、利用onkeyup事件，去判断每一个控件的验证方式（不如用户名，密码) 2、单击提交事件，去判断必须提交

1、利用onkeyup事件，去判断每一个控件的验证方式（不如用户名，密码)
2、单击提交事件，去判断必须提交每一项是否为空并且判断是否输入格式不对,如果都正确，那么就可以提交，不正确响应的控件获得焦点，并提示错误不提交表单
3、单击重置按钮，所有提示信息都恢复到默认状态


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-size: 16px;
            color: #333;
            letter-spacing: 1px;
            line-height: 40px;
        }

        .ok {
            color: #0f0;
        }

        .no {
            color: #f00;
        }

        span {
            margin-left: 10px;
            color: #f00;
        }
    </style>
</head>

<body>
    <form action="#" name="form1" method="post">
        <p>用户名:<input type="text" name="username"><span id="namemsg">*</span></p>
        <p>密码:<input type="password" name="userpwd"><span id="pwdmsg">*</span></p>
        <p><input type="submit" name="sub" value="提交"></p>
        <p><input type="reset" name="ret" value="重置"></p>
    </form>
    <script>
        document.form1.username.onkeyup = function () {
            var regname = /^[a-zA-Z]\W{3,30}$/;
            if (regname.test(this.value)) {
                document.getElementById("namemsg").innerHTML = "用户名格式正确";
                document.getElementById("namemsg").setAttribute("class", "ok");
            } else {
                document.getElementById("namemsg").innerHTML = "用户名格式不正确";
                document.getElementById("namemsg").setAttribute("class", "no");
            }
        }
        //给表单添加事件
        document.form1.onsubmit=function(){
            if(document.getElementById("namemsg").getAttribute("class")!="ok"){
                document.form1.username.focus();//用户名获得焦点
                document.getElementById("namemsg").innerHTML="用户名格式不正确";
                document.getElementById("namemsg").setAttribute("class","no");
                return false;//阻止表单提交
            }
        }
        document.form1.onreset=function(){
            document.getElementById("namemsg").removeAttribute("class");
            document.getElementById("namemsg").innerHTML="*";
        }
    </script>
</body>

</html>