js表单-CSDN博客

本文链接：https://blog.csdn.net/weixin_45363671/article/details/111300771
一个简答表单，但是功能贼全

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
           color: red;
           font-weight: bold;
        }
    </style>
</head>
<body>
    <script>
        window.onload=function(){
          var username=document.getElementById("username");
          var usernameError=document.getElementById("usernameError");
         
            username.onblur=function(){
                var usernameq=username.value;
                //失去焦点事件 获取用户名判断是否为空
                usernameq=usernameq.trim();//气死了上面的变量值整错了
               // alert("--"+usernameq+"--");
               //console.log()
               if(usernameq==""){
                   //alert("用户名为空")
                   usernameError.innerText="用户名不能为空";
               }else{
                    //继续判断其他合法性
                    if(usernameq.length<6||usernameq.length>14){
                        usernameError.innerText="用户名长度非法";
                    }else{
                        //判断是否含有特殊字符
                        var regExp=/^[A-Za-z0-9]+$/;
                        var ok=regExp.test(usernameq);
                        if(ok){
                            //usernameError.innerHTML="<font color='green'>✓</font>";
                        }else{
                            usernameError.innerText="用户名含有非法字符";
                        }
                    }
               }
            }
            username.onfocus=function(){
               // var usernameq=username.value;
                //清空span
                if(usernameError.innerText!=""){
                   // usernameq.value="";
                   username.value="";
                }
                //清空非法的value
                usernameError.innerText="";
                
            }
            var passwordError=document.getElementById("passwordError");
            //获取确认密码时间
            var userpass2=document.getElementById("password2");
            userpass2.onblur=function(){
                var userpass=document.getElementById("password");
                var  userpass11= userpass.value;
                var  userpass22= userpass2.value;
                if( userpass11!= userpass22){
                    //密码不一致
                    passwordError.innerText="密码不一致";
                }else{
                    //密码一致
                }
            }
            userpass2.onfocus=function(){
                if(passwordError.innerText!=""){
                    userpass2.value="";
                }
                 passwordError.innerText="";
                
            }
            var emailError=document.getElementById("emailError");
            var email=document.getElementById("email");
            email.onblur=function(){
                var email2=email.value;
                var emailRegExp=/\b[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,6}\b/g;
                var ok=emailRegExp.test(email2);
                if(ok){

                }else{
                    emailError.innerText="邮箱不合法";
                }
            }
            email.onfocus=function(){
                if(emailError.innerText!=""){
                    email.value="";
                }emailError.innerText="";
            }
            var subButton=document.getElementById("subButton");
            subButton.onclick=function(){
                //出发几个需要验证的blur
                //不带on的是不需要人工操作的，使用纯Js代码
                username.focus();
                username.blur();
                password2.focus();
                password2.blur();
                email.focus();
                email.blur();
                if(usernameError.innerText==""&&passwordError.innerText==""&&passwordError.innerText==""){
                    var form1=document.getElementById("form1");
                    form1.submit();
                }
            }
        }

    </script>
    <form action="http://localhost:8080/jd/save" method="get" id="form1">
    用户名 <input type="text" name="username" id="username"/><span id="usernameError"> </span><br>
    密码<input type="text" name="password" id="password"><br>
    确认密码<input type="text" name="password2" id="password2"><span id="passwordError"> </span><br>
    邮箱<input type="text"  name="email" id="email"><span id="emailError"> </span><br>
    <!-- <input type="submit" value="注册"> 因为这个直接就提交了我们需要在之前判断-->
    
    <input type="button" value="注册" id="subButton">
    <input type="reset" value="重置">
    </form>
</body>
</html>
我也是新手有问题多交流