用正則表達(dá)式實(shí)現(xiàn)表單驗(yàn)證提交

發(fā)表時(shí)間：2020-10-17

發(fā)布人：葵宇科技

瀏覽次數(shù)：60

用正則表達(dá)式實(shí)現(xiàn)表單驗(yàn)證提交

前端基礎(chǔ)，正好做個(gè)練手，記錄一下
用到了HTML5的標(biāo)簽和JS的基本邏輯還有正則表達(dá)式
這么屑的代碼還有人看？（滑稽）

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
    <body>
    <script>
        window.onload=function(){
            //用戶名驗(yàn)證模塊
            document.getElementById("username").onblur=function(){//用戶名表單驗(yàn)證，失焦時(shí)觸發(fā)
                //用戶名不能為空
                var username=document.getElementById("username")//拿到用戶名文檔對(duì)象
                var usernameError=document.getElementById("usernameError")//拿到文檔報(bào)錯(cuò)對(duì)象
                if(username.value==""){
                    usernameError.innerHTML="<font color='red' size='2'>注冊名不能為空!</font>"
                }
                //用戶名必須在6-14位之間
                //用戶登錄正則表達(dá)格式
                var regExpUesrname=/^[a-zA-Z]\w{5,13}$/
                    //regExpOK正則true/false接收用
                var regExpOK=regExpUesrname.test(username.value)
                if(!regExpOK){
                    if(username.value.length<6){
                        usernameError.innerHTML="<font color='red' size='2'>注冊名不能小于6位!</font>"
                    }
                    if(username.value.length>14){
                        usernameError.innerHTML="<font color='red' size='2'>注冊名不能大于14位!</font>"
                    }
                    document.getElementById("username").onfocus=function(){
                        username.value=""
                        //清空報(bào)錯(cuò)span標(biāo)簽
                        usernameError.innerText=""
                    }
                }
            }
            //郵箱驗(yàn)證模塊
            //郵箱失焦事件
            document.getElementById("email").onblur=function(){
                //拿到郵箱對(duì)象
                var email=document.getElementById("email")
                //拿到郵箱報(bào)錯(cuò)對(duì)象
                var emailError=document.getElementById("emailError")
                //拿到郵箱正則表達(dá)對(duì)象
                var emailregExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
                //拿到正則判斷對(duì)象
                var emailregExpOK=emailregExp.test(email.value)
                //郵箱格式判斷
                if (!emailregExpOK){
                //郵箱格式報(bào)錯(cuò)
                    emailError.innerHTML="<font color='red' size='2'>郵箱格式錯(cuò)誤！</font>"
                    //聚焦清空模塊
                    document.getElementById("email").onfocus=function(){
                        email.value=""
                        //清空報(bào)錯(cuò)span標(biāo)簽
                        emailError.innerText=""
                    }
                }
            }
            //重復(fù)密碼驗(yàn)證單元
            //重復(fù)密碼失焦事件
            document.getElementById("passwordAgain").onblur=function(){
                //拿到密碼對(duì)象和密碼重復(fù)對(duì)象
                var password=document.getElementById("password")
                var passwordagain=document.getElementById("passwordAgain")
                //重復(fù)密碼密碼報(bào)錯(cuò)對(duì)象
                var passwordgaginError=document.getElementById("passwordAgainError")
                //密碼不重復(fù)事件
                if (password.value!=passwordagain.value){
                //密碼報(bào)錯(cuò)
                    passwordgaginError.innerHTML="<font color='red' size='2'>確認(rèn)密碼與重復(fù)密碼不一致！</font>"
                    //聚焦清空模塊
                    document.getElementById("passwordAgain").onfocus=function(){
                        passwordagain.value=""
                        //清空報(bào)錯(cuò)span標(biāo)簽
                        passwordgaginError.innerText=""
                    }
                }
            }
        }
    </script>
    <!--表單提交，form和action-->
        <form action="http://localhost:8080/user" method="post">
            <table>
            <tr>
                <th>用戶名:</th>
                <th><input type="text" id="username" name="username"/></th>
                <th><span id="usernameError"></span></th>
            </tr>
            <tr>
                <th>郵    箱：</th>
                <th><input type="text" id="email" name="email"/></th>
                <th><span id="emailError"></span></th>
            </tr>
            <tr>
                <th>密    碼:</th>
                <th><input type="text" id="password" /></th>
                <th><span id="passwordError"></span></th>
            </tr>
            <tr>
                <th>確認(rèn)密碼:</th>
                <th> <input type="text" id="passwordAgain" name="passwordAgain"/></th>
                <th> <span id="passwordAgainError"></span></th>
            </tr>
            <tr>
                <th></th>
                <th><input action="http://www.localhost:8086.com" type="submit" id="btn" value="提   交" method="post"/></th>
                <th></th>
            </tr>
           </table>
        </form>
    </body>
</html>