用正则表达式实现表单验证提交

10/19 09:05
阅读数 11

用正则表达式实现表单验证提交

前端基础,正好做个练手,记录一下
用到了HTML5的标签和JS的基本逻辑还有正则表达式
这么屑的代码还有人看?(滑稽)

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
    <body>
    <script>
        window.onload=function(){
   
   
            //用户名验证模块
            document.getElementById("username").onblur=function(){
   
   //用户名表单验证,失焦时触发
                //用户名不能为空
                var username=document.getElementById("username")//拿到用户名文档对象
                var usernameError=document.getElementById("usernameError")//拿到文档报错对象
                if(username.value==""){
   
   
                    usernameError.innerHTML="<font color='red' size='2'>注册名不能为空!</font>"
                }
                //用户名必须在6-14位之间
                //用户登录正则表达格式
                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=""
                        //清空报错span标签
                        usernameError.innerText=""
                    }
                }
            }
            //邮箱验证模块
            //邮箱失焦事件
            document.getElementById("email").onblur=function(){
   
   
                //拿到邮箱对象
                var email=document.getElementById("email")
                //拿到邮箱报错对象
                var emailError=document.getElementById("emailError")
                //拿到邮箱正则表达对象
                var emailregExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
                //拿到正则判断对象
                var emailregExpOK=emailregExp.test(email.value)
                //邮箱格式判断
                if (!emailregExpOK){
   
   
                //邮箱格式报错
                    emailError.innerHTML="<font color='red' size='2'>邮箱格式错误!</font>"
                    //聚焦清空模块
                    document.getElementById("email").onfocus=function(){
   
   
                        email.value=""
                        //清空报错span标签
                        emailError.innerText=""
                    }
                }
            }
            //重复密码验证单元
            //重复密码失焦事件
            document.getElementById("passwordAgain").onblur=function(){
   
   
                //拿到密码对象和密码重复对象
                var password=document.getElementById("password")
                var passwordagain=document.getElementById("passwordAgain")
                //重复密码密码报错对象
                var passwordgaginError=document.getElementById("passwordAgainError")
                //密码不重复事件
                if (password.value!=passwordagain.value){
   
   
                //密码报错
                    passwordgaginError.innerHTML="<font color='red' size='2'>确认密码与重复密码不一致!</font>"
                    //聚焦清空模块
                    document.getElementById("passwordAgain").onfocus=function(){
   
   
                        passwordagain.value=""
                        //清空报错span标签
                        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>确认密码:</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>
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部