js表单验证

利用js对表单进行基本的验证

验证功能：

1. 用户名必须填写
2. 密码长度8-16之间
3. 邮箱地址，手机号必须符合正确格式
4. 必须同意（勾选复选框）才能提交

js代码段：

<script>
            //对document.getElementById进行简单封装
            function $id(id) {
                return document.getElementById(id);
            }
            $id("submitBtn").addEventListener('click',function () {
                //获取表单元素
                let f = document.forms[0];
                //获取用户名
                let uname = f.username.value;
                //获取密码
                let pwd = f.password.value;
                //获取电话
                let phone = f.tel.value;
                //获取邮箱地址
                let email = f.email.value;
                //标记量,用于判断表单是否能够提交
                let torf = false;
                //用户名不能为空
                if (uname.length == 0) {
                    $id("vname").innerText="请输入用户名";
                    torf = false;
                }else{
                    $id("vname").innerText="";
                    torf = true;
                }

                //密码长度必须为8-16之间
                if (pwd.length>=8 && pwd.length<=16){
                    $id("vpwd").innerText="";
                    torf = true;
                } else if (pwd.length == 0) {
                    $id("vpwd").innerText="密码不能为空";
                    torf = false;
                }else{
                    $id("vpwd").innerText="密码长度必须为8-16";
                    torf = false;
                }

                //验证电话
                let regexP = /^1[385]\d{9}$/;
                if (regexP.test(phone)){
                    $id("vphone").innerText="";
                    torf = true;
                }else if (phone.length == 0){
                    $id("vphone").innerText="电话号码不能为空";
                    torf = false;
                } else{
                    $id("vphone").innerText="电话号码格式不对";
                    torf = false;
                }

                //验证邮箱
                let regexE = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
                if (regexE.test(email)){
                    $id("vemail").innerText="";
                    torf = true;
                } else if (email.length == 0){
                    $id("vemail").innerText="邮箱不能为空";
                    torf = false;
                } else{
                    $id("vemail").innerText="邮箱格式输入有误";
                    torf = false;
                }

                // 复选框验证
                if (document.querySelector('input[name=sure]').checked){
                    $id("vsure").innerText="";
                }else{
                    $id("vsure").innerText="请勾选";
                    torf = false;
                }

                if (torf){
                    f.submit();
                }
            })
        </script>

注册页面设计（css样式就不在这献丑了，重点也不在这）：

<div class="right">
            <div style="margin: 40px 0 20px 68px;">
                <img src="TB1_Gn8RXXXXXXqaFXXXXXXXXXX-380-54.png">
            </div>
            <div class="right1">
                <span class="span1"><b>欢迎注册</b></span><br>
                <span class="span2">已有帐号？<a href="#" style="text-decoration: none">登录</a></span>
                <form style="padding: 60px 0 0 45px" action="">
                    <table>
                        <tr>
                            <td>用户名:</td>
                            <td><input type="text" name="username"></td>
                            <td><span id="vname"></span></td>
                        </tr>
                        <tr>
                            <td>密码:</td>
                            <td><input type="password" name="password"></td>
                            <td><span id="vpwd"></span></td>
                        </tr>
                        <tr>
                            <td>电话号码:</td>
                            <td><input type="text" name="tel"></td>
                            <td><span id="vphone"></span></td>
                        </tr>
                        <tr>
                            <td>邮箱:</td>
                            <td><input type="text" name="email"></td>
                            <td><span id="vemail"></span></td>
                        </tr>
                    </table>
                    <button type="button" class="button" id="submitBtn" >注册</button>
                </form>
                <input type="checkbox" value="1" class="check" name="sure">
                <label style="font-size: 10px">阅读并接受</label>
                <a href="#" style="font-size: 10px">《天猫用户协议》</a>
                <label style="font-size: 10px">及</label>
                <a href="#" style="font-size: 10px">《天猫隐私权保护声明》</a>
                <span id="vsure"></span>
            </div>
        </div>

测试结果：