表单校验小练习

表单校验作业

基本需求

• 用户名，4-8位数字或字母组合，不合法时右边红字提示“您输入的用户名不合法”，合法时右边绿色提示√
• 密码，6位纯数字，不合法时右边红字提示“您输入的密码不合法”，合法时右边绿色提示√，密码默认为暗文形式，输入框加入一个小眼睛图标，点击后密码为明文，再次点击为暗文
• 确认密码，与密码一致，若不一致红色提示“您两次输入的密码不一致”
• 登录按钮，
• 注册按钮，判断哪个表单项没填，如果都填了在判断哪项填的不对，并在右侧提示，全部正确后弹出登录成功的提示框

实现代码

HTML

 <form action="#">
        <h2>表单校验练习</h2>
        <div>
            <span>账号：</span>
            <input type="text" name="账户" id="username" placeholder="请输入账号">
            <span class="tips">4-8位数字或字母组合</span>
        </div>
        <div>
            <span>密码：</span>
            <input type="password" name="密码" id="pwd" placeholder="请输入您的密码">
            <img src="eye-slash.png" alt="" class="eye" id="pwdeye">
            <span class="tips">6位纯数字组合</span>
        </div>
        <div>
            <span>确认密码：</span>
            <input type="password" name="确认密码" id="repwd" placeholder="请再次输入您的密码" >
            <img src="eye-slash.png" alt="" class="eye" id="repwdeye">
            <span class="tips"></span>
        </div>
        <div class="btns">
            <button id="login">注册</button>
            <button id="logup">已有账户？立即登录</button>
            <p class="tips"></p>
        </div>

CSS

<style>
        * {
            margin: 0;
            padding: 0;
        }

        form {
            width: 550px;
            height: 300px;
            margin: 50px auto;
            padding: 30px;
            border: 1px solid#3BA8DB;
            border-radius: 8px;
            font-size: 18px;
        }

        h2 {
            text-align: center;
            color: #3BA8DB;
            margin-bottom: 30px;
        }

        div {
            margin-bottom: 30px;
            position: relative;
           
        }

        input {
            width: 200px;
            height: 30px;
        }

        div span {
            display: inline-block;
            width: 100px;
            text-align: right;
            color: #2E8CB8;
        }

        .eye {
            position: absolute;
            top: 5px;
            right: 245px;
            display: inline-block;
            width: 20px;
            height: 20px;
            opacity: 0.5;
        }

        .tips {
            display: inline-block;
            width: 200px;
            font-size: 12px;
            text-align: left;
            color: #1A739C;
            line-height: 17px;
            vertical-align: middle;
        }

        .btns {
            text-align: center;

        }

        .btns button {
            width: 180px;
            height: 40px;
            margin-right: 20px;
            background-color: #1997D1;
            border: none;
            border-radius: 10px;
            color: #fff;
            font-size: 16px;
            outline: none;
        }

        .btns button:hover {
            background-color: #1481B3;
        }

        .btns #logup {
            margin-right: 0;
        }

        .btns p {
            width: 250px;
        }

JavaScript

<script>
            //获取所需的元素
            var username = document.getElementById("username");
            var pwd = document.getElementById("pwd");
            var repwd = document.getElementById("repwd");
            var pwdEye = document.getElementById("pwdeye");
            var repwdEye = document.getElementById("repwdeye");
            var login = document.getElementById("login");
            var logup = document.getElementById("logup");
            var tips = document.getElementsByClassName("tips");

            var regName = /^[\da-zA-Z]{4,8}$/;
            var regPwd = /^[\d]{6}$/;

            //校验账户
            function testName() {
                tips[3].innerHTML = "";
                if (username.value === "") {
                    tips[0].innerHTML = "用户名不能为空";
                    tips[0].style.color = "red";
                } else {
                    if (regName.test(username.value)) {
                        tips[0].innerHTML = "√";
                        tips[0].style.color = "green";
                        return true;
                    } else {
                        tips[0].innerHTML = "您输入的用户名不合法，用户名需为4-8位数字或字母组合";
                        tips[0].style.color = "red";
                    }
                }
                return false;
            }

            //校验密码
            function testPwd() {
                tips[3].innerHTML = "";
                if (pwd.value === "") {
                    tips[1].innerHTML = "密码不能为空";
                    tips[1].style.color = "red";
                } else {
                    if (regPwd.test(pwd.value)) {
                        tips[1].innerHTML = "√";
                        tips[1].style.color = "green";
                        if (repwd.value === pwd.value) {
                            tips[2].innerHTML = "√";
                            tips[2].style.color = "green";
                        }
                        return true;
                    } else {
                        tips[1].innerHTML = "您输入的密码不合法,密码需为6位纯数字组合";
                        tips[1].style.color = "red";
                    }

                    if (repwd.value !== "" && repwd.value !== pwd.value) {
                        tips[2].innerHTML = "您两次输入的密码不一致";
                        tips[2].style.color = "red";
                    }
                }
                return false;

            }

            //校验确认密码
            function testRepwd() {
                tips[3].innerHTML = "";
                if (repwd.value === "") {
                    tips[2].innerHTML = "确认密码不能为空";
                    tips[2].style.color = "red";
                } else {
                    if (!regPwd.test(repwd.value)) {
                        tips[2].innerHTML = "您输入的确认密码不合法，确认密码需为6位纯数字组合,并且与密码相等";
                        tips[2].style.color = "red";
                    } else {
                        if (pwd.value === repwd.value) {
                            tips[2].innerHTML = "√";
                            tips[2].style.color = "green";
                            return true;
                        } else {
                            tips[2].innerHTML = "您两次输入的密码不一致";
                            tips[2].style.color = "red";
                        }
                    }

                }
                return false;
            }


            //改变密码显示方式
            function changeShow(obj, ele) {
                //注意获取到src为绝对路径
                var num = obj.src.lastIndexOf("/") + 1;
                var flag = (obj.src.substring(num) === "eyes.png");
                obj.src = flag ? "eye-slash.png" : "eyes.png";
                ele.type = flag ? "password" : "text";
                console.log(obj.src.substring(num));

            }

            //给元素注册相应事件，
            username.onblur = testName;
            pwd.onblur = testPwd;
            repwd.onblur = testRepwd;
            pwdEye.onclick = function() {
                changeShow(pwdEye, pwd)
            }
            repwdEye.onclick = function() {
                changeShow(repwdEye, repwd)
            }

            //点击注册，校验所有
            login.onclick = function(e) {
                e.preventDefault();
                tips[3].innerHTML = "";
                if (!testName()) {
                    tips[3].innerHTML = "注册失败！请先填写正确的账户";
                    tips[3].style.color = "red";
                } else if (!testPwd()) {
                    tips[3].innerHTML = "注册失败！请先填写正确的密码";
                    tips[3].style.color = "red";
                } else if (!testRepwd()) {
                    tips[3].innerHTML = "注册失败！请先填写正确的确认密码";
                    tips[3].style.color = "red";
                } else {
                    tips[3].innerHTML = "";
                    //在同等情况下，alert会先执行
                    setTimeout("alert('恭喜你！终于注册成功啦')", 0);
                }

            }

            logup.onclick = function(e) {
                e.preventDefault();
                alert("对不起，暂未开通此功能");
            }
        </script>

踩的坑

img的src属性

设置图片路径的时候，设置绝对路径和相对路径都可以，但是取值的时候只能取到绝对路径，可以用截取子字符串获取绝对路径后半部分的图片路径

元素绑定事件的传参

js中绑定事件并传参数主要是通过function(){setName(name);}将代码要绑定的函数在其中调用，并在外层定义好参数；例如

 repwdEye.onclick = function () {
                changeShow(repwdEye, repwd)
            }

阻止表单的默认提交事件

如果想要阻止表单的默认提交事件，有以下几种方法：

1.将input标签内按钮类型从type="submit"修改为type=“button”

2.表单内的button未指定类型时，默认的类型为submit，可以显式的修改为button type="button"来阻止表单提交

3.利用e.preventDefault()方法：

多行文本垂直居中

用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性值（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即设置vertical-align：middle。