找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发基础的表单验证简要js原生写法

2019-01-23 20:35:00 分类：JavaScript 阅读(684) 评论(0)
面试前端开发怎么自己介绍
面试前端开发需要问哪些问题
去小公司面试前端开发会考试吗

表单界面
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
        <style type=”text/css”>
            tr > td:first-of-type {
                width: 80px;
                text-align: right;
            }
            tr > td:last-of-type {
                font-size: 12px;
                color: #a00;
            }
            #yzmPut {
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <form action=”finnsh.html” onsubmit=”return fn()”>
            <table>
                <tr>
                    <td>用户名：</td>
                    <td><input type=”text” name=”user” id=”user” /></td>
                    <td id=”userInfo”></td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td><input type=”password” name=”psd” id=”psd” /></td>
                    <td id=”psdInfo”></td>
                </tr>
                <tr>
                    <td>确认密码：</td>
                    <td><input type=”password” name=”rpsd” id=”rpsd” /></td>
                    <td id=”rpsdInfo”></td>
                </tr>
                <tr>
                    <td>电子邮箱：</td>
                    <td><input type=”text” name=”email” id=”email” /></td>
                    <td id=”emailInfo”></td>
                </tr>
                <tr>
                    <td>手机号码：</td>
                    <td><input type=”text” name=”tel” id=”tel” /></td>
                    <td id=”telInfo”></td>
                </tr>
                <tr>
                    <td>固定电话：</td>
                    <td><input type=”text” name=”gtel” id=”gtel” /></td>
                    <td id=”gtelInfo”></td>
                </tr>
                <tr>
                    <td>QQ号码：</td>
                    <td><input type=”text” name=”qq” id=”qq” /></td>
                    <td id=”qqInfo”></td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>验证码：</td>
                    <td><input type=”text” name=”yzm” id=”yzm” /></td>
                    <td id=”yzmPut”></td>
                    <td id=”yzmInfo”></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type=”submit” value=”完成注册” /></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </form>
        <script type=”text/javascript”>
            // 用户名
            var oUser = document.getElementById(‘user’)
            var oUserInfo = document.getElementById(‘userInfo’)
            oUser.onfocus = function() {
                oUserInfo.innerHTML =
                    ‘请输入字母、数字、下划线构成，首字母不可以是数字，6-12位的用户名’
            }
            function userfn() {
                if (oUser.value == ”) {
                    oUserInfo.innerHTML = ‘用户名不可以为空’
                    return false
                }
                var regex = /^[a-zA-Z_]\w{5,11}$/
                if (regex.test(oUser.value) == true) {
                    oUserInfo.innerHTML = ‘√’
                    return true
                } else {
                    oUserInfo.innerHTML =
                        ‘必须是由字母、数字、下划线构成，首字母不可以是数字，6-12位的用户名’
                    return false
                }
            }
            oUser.onblur = userfn
            // 密码
            var oPsd = document.getElementById(‘psd’)
            var oPsdInfo = document.getElementById(‘psdInfo’)
            oPsd.onfocus = function() {
                oPsdInfo.innerHTML =
                    ‘密码由字母、数字、下划线构成，6位，首字母不可以是数字’
            }
            function psdfn() {
                if (oPsd.value == ”) {
                    oPsdInfo.innerHTML = ‘密码不能为空’
                    return false
                }
                var regex = /^[a-zA-Z_]\w{5}$/
                if (regex.test(oPsd.value) == true) {
                    oPsdInfo.innerHTML = ‘√’
                    return true
                } else {
                    oPsdInfo.innerHTML =
                        ‘密码必须由字母、数字、下划线构成，6位，首字母不可以是数字’
                    return false
                }
            }
            oPsd.onblur = psdfn
            // 密码确认
            var oRpsd = document.getElementById(‘rpsd’)
            var oRpsdInfo = document.getElementById(‘rpsdInfo’)
            oRpsd.onfocus = function() {
                oRpsdInfo.innerHTML = ‘确认密码’
            }
            function rpsdfn() {
                if (oRpsd.value == ”) {
                    oRpsdInfo.innerHTML = ‘确认密码不能为空’
                    return false
                }
                if (oRpsd.value == oPsd.value) {
                    oRpsdInfo.innerHTML = ‘√’
                    return true
                } else {
                    oRpsdInfo.innerHTML = ‘密码输入不一致’
                    return false
                }
            }
            oRpsd.onblur = rpsdfn
            // 电子邮箱
            var oEmail = document.getElementById(’email’)
            var oEmailInfo = document.getElementById(’emailInfo’)
            oEmail.onfocus = function() {
                oEmailInfo.innerHTML =
                    ‘格式为xxxxx@xxxxxx.com/cn/net/com.cn/edu/gov，首字母不可以是数字’
            }
            function emailfn() {
                if (oEmail.value == ”) {
                    oEmailInfo.innerHTML = ‘邮箱不能为空’
                    return false
                }
                var regex = /^[a-zA-Z_]\w*@\w+\.(com|cn|net|com.cn|edu|gov)$/
                if (regex.test(oEmail.value) == true) {
                    oEmailInfo.innerHTML = ‘√’
                    return true
                } else {
                    oEmailInfo.innerHTML = ‘邮箱格式输入不正确’
                    return false
                }
            }
            oEmail.onblur = emailfn
            // 手机号
            var oTel = document.getElementById(‘tel’)
            var oTelInfo = document.getElementById(‘telInfo’)
            oTel.onfocus = function() {
                oTelInfo.innerHTML = ‘以135/137/138开头的11为纯数字’
            }
            function telfn() {
                if (oTel.value == ”) {
                    oTelInfo.innerHTML = ‘手机号不能为空’
                    return false
                }
                var regex = /^1(35|37|38)\d{8}$/
                if (regex.test(oTel.value) == true) {
                    oTelInfo.innerHTML = ‘√’
                    return true
                } else {
                    oTelInfo.innerHTML = ‘手机格式输入不正确’
                    return false
                }
            }
            oTel.onblur = telfn
            // 固定电话
            var oGtel = document.getElementById(‘gtel’)
            var oGtelInfo = document.getElementById(‘gtelInfo’)
            oGtel.onfocus = function() {
                oGtelInfo.innerHTML =
                    ‘020-12345678或0312-1234567，横线前最多4为最少3位，且以0开头，横线后为7或8位数字’
            }
            function gtelfn() {
                if (oGtel.value == ”) {
                    oGtelInfo.innerHTML = ‘固定电话号不能为空’
                    return false
                }
                var regex = /^0\d{2,3}-\d{7,8}$/
                if (regex.test(oGtel.value) == true) {
                    oGtelInfo.innerHTML = ‘√’
                    return true
                } else {
                    oGtelInfo.innerHTML = ‘固定电话格式输入不正确’
                    return false
                }
            }
            oGtel.onblur = gtelfn
            // qq
            var oQq = document.getElementById(‘qq’)
            var oQqInfo = document.getElementById(‘qqInfo’)
            oQq.onfocus = function() {
                oQqInfo.innerHTML = ‘QQ号5位以上’
            }
            function qqfn() {
                if (oQq.value == ”) {
                    oQqInfo.innerHTML = ‘QQ号不能为空’
                    return false
                }
                var regex = /^\d{5,}$/
                if (regex.test(oQq.value) == true) {
                    oQqInfo.innerHTML = ‘√’
                    return true
                } else {
                    oQqInfo.innerHTML = ‘QQ号格式输入不正确’
                    return false
                }
            }
            oQq.onblur = qqfn
            // 验证码
            var yzm = document.getElementById(‘yzm’)
            var yzmPut = document.getElementById(‘yzmPut’)
            var yzmInfo = document.getElementById(‘yzmInfo’)
            function yzmputfn() {
                var str = ‘abcdefghijklmnopqrstuvwxyz0123456789’
                var newstr = ”
                for (var i = 0; i < 5; i++) {
                    var index = parseInt(Math.random() * str.length)
                    newstr += str[index]
                }
                yzmPut.innerHTML = newstr
            }
            window.onload = yzmputfn
            yzmPut.onclick = yzmputfn
            function yzmfn() {
                if (yzm.value == ”) {
                    yzmInfo.innerHTML = ‘验证码不能为空’
                    return false
                }
                if (yzm.value == yzmPut.innerHTML) {
                    yzmInfo.innerHTML = ‘√’
                    return true
                } else {
                    yzmInfo.innerHTML = ‘验证码不正确’
                    return false
                }
            }
            yzm.onblur = yzmfn
            yzm.onfocus = function() {
                // yzmInfo.innerHTML = “请输入验证码”;
                if (yzmInfo.innerHTML == ‘验证码不正确’) {
                    yzmputfn()
                    yzmInfo.innerHTML = ”
                    yzm.value = ”
                } else if (yzmInfo.innerHTML == ”) {
                    yzmInfo.innerHTML = ‘请输入验证码’
                }
            }
            // 判断跳转条件
            function fn() {
                var res1 = userfn()
                var res2 = psdfn()
                var res3 = rpsdfn()
                var res4 = emailfn()
                var res5 = telfn()
                var res6 = gtelfn()
                var res7 = qqfn()
                var res8 = yzmfn()
                return (
                    res1 && res2 && res3 && res4 && res5 && res6 && res7 && res8
                )
            }
        </script>
    </body>
</html>

跳转界面，当表单验证完成后会跳转到该页面
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
        <style type=”text/css”>
            * {
                margin: 0;
                padding: 0;
            }
            h1 {
                margin-top: 100px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>注册成功!!!</h1>
    </body>
</html>
魅族前端开发面试经验
前端开发面试笔试题目
应届生前端开发面试自我介绍
» 本文来自：前端开发者 » 《前端开发基础的表单验证简要js原生写法》
» 本文链接地址：https://www.rokub.com/7974.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论