原生JS表单验证案例

展示错误效果
<!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>
</head>
<body>

    <form name="frm" action="http://www.baidu.com" method="POST" onsubmit="formCheck()">
         用户名:<input type="text" id="user" /><span id="userMsg" ></span><br>
         密码:<input type="password" id="pwd" /><span id="pwdMsg" ></span><br>
         确认密码:<input type="password" id="checkPwd" /><span id="checkPwdMsg" ></span><br>
         手机:<input type="text" id="tel" /><span id="telMsg" ></span><br>
         邮箱:<input type="text" id="email" /><span id="emailMsg" ></span><br>
         个人信息:<br>
         <textarea rows="10" cols="40" id="content" style="resize: none;" ></textarea><span id="contentMsg" ></span><br>
         <input type="submit" value="注册">

    </form>
    <script>
        function formCheck(){
            //取消submit的默认效果。
            var e = window.event;
            e.preventDefault();
            //正则 规定输入内容的格式
            var userPatt = /^[A-z]\w{5,14}$/
            var pwdPatt = /^.{6,15}$/
            var checkpwdPatt = /^.{6,15}$/
            var telPatt = /^1[356789]\d{9}$/
            var emailPatt = /^(www\.)?([0-9]|[A-z])([0-9]|[A-z]){5,11}\@(qq|163|sin|yahoo)(\.com)(\.cn)?$/;
            var userinfoPatt = /^.{15,100}$/
            var user = document.frm.user.value;
            var pwd = document.frm.pwd.value;
            var checkPwd = document.frm.checkPwd.value;
            var tel = document.frm.tel.value;
            var email = document.frm.email.value;
            var userinfo = document.frm.content.value;
            //填入内容都正确才可以提交
            if(userPatt.test(user)&& pwdPatt.test(pwd)&& telPatt.test(tel)&&emailPatt.test(email)&&userinfoPatt.test(userinfo)){
            document.frm.submit();
            }
        }
        //添加失焦事件
        document.getElementById("user").onblur= checkUsername;
        document.getElementById("pwd").onblur= checkPassword;
        document.getElementById("checkPwd").onblur= password;
        document.getElementById("tel").onblur= checkTel;
        document.getElementById("email").onblur= checkEmail;
        document.getElementById("content").onblur= checkContent;

        
        function checkUsername(){
            var userPatt = /^[A-z]\w{5,14}$/
            var user = document.frm.user.value;
            if( userPatt.test(user)){
                document.getElementById("userMsg").innerHTML ="<span style='color:green'>恭喜您验证通过，该用户名可以使用！</span>"
                console.log(document.getElementById("userMsg"));
            }else{
                document.getElementById("userMsg").innerHTML ="<span style='color:red'>用户名验证失败，请检查后重新输入！</span>"    
            }
        }
        function checkPassword(){
            var pwdPatt = /^.{6,15}$/;
            var pwd = document.frm.pwd.value;
            if( pwdPatt.test(pwd)){
                document.getElementById("pwdMsg").innerHTML ="<span style='color:green'>恭喜您验证通过，该用户名可以使用！</span>"
            }else{
                document.getElementById("pwdMsg").innerHTML ="<span style='color:red'>用户名验证失败，请检查后重新输入！</span>"
            }
        }
        function password(){
            var pwd = document.frm.pwd.value;
            var checkPwd = document.frm.checkPwd.value
                if(pwd == checkPwd){
                    if(pwd==""){
                        document.getElementById("checkPwdMsg").innerHTML ="<span style='color:red'>用户名未输入密码，请先输入密码再验证！</span>"
                    }else{
                document.getElementById("checkPwdMsg").innerHTML ="<span style='color:green'>恭喜您验证通过，该用户名可以使用！</span>"
                    }
                }else{
                document.getElementById("checkPwdMsg").innerHTML ="<span style='color:red'>用户名验证失败，请检查后重新输入！</span>"
                }
            }
        function checkTel(){
            var telPatt = /^1[356789]\d{9}$/
            var tel = document.frm.tel.value;
            if( telPatt.test(tel)){
                    document.getElementById("telMsg").innerHTML ="<span style='color:green'>恭喜您验证通过，该用户名可以使用！</span>"
            }else{
                
                document.getElementById("telMsg").innerHTML ="<span style='color:red'>用户名验证失败，请检查后重新输入！</span>"    
            }
        }
        function checkEmail(){
            var emailPatt = /^(www\.)?([0-9]|[A-z])([0-9]|[A-z]){5,11}\@(qq|163|sin|yahoo)(\.com)(\.cn)?$/;
            var email = document.frm.email.value;

            if( emailPatt.test(email)){
                document.getElementById("emailMsg").innerHTML ="<span style='color:green'>恭喜您验证通过，该用户名可以使用！</span>"
            }else{
                document.getElementById("emailMsg").innerHTML ="<span style='color:red'>用户名验证失败，请检查后重新输入！</span>"
            }
        }
        function checkContent(){
            var userinfoPatt = /^.{15,100}$/;
            var userinfo = document.frm.content.value;
            if( userinfoPatt.test(userinfo)){
                document.getElementById("contentMsg").innerHTML ="<span style='color:green'>恭喜您验证通过，该用户名可以使用！</span>"
            }else{
                document.getElementById("contentMsg").innerHTML ="<span style='color:red'>用户名验证失败，请检查后重新输入！</span>"
            }
        }
    </script> 
</body>
</html>
展示正确效果：
提示：内容虚拟
原生JS表单验证案例

猜你喜欢
