其他分享
首页 > 其他分享> > 综合案例-黑马旅游网注册功能分析和表单校验

综合案例-黑马旅游网注册功能分析和表单校验

作者:互联网

综合案例-黑马旅游网注册功能分析

图解

 

 综合案例-黑马旅游网注册功能_表单校验

表单校验功能

  1. 用户名:单词字符 长度8到20位
  2. 密码:单词字符 长度8到20位
  3. email:邮件格式
  4. 姓名:非空
  5. 手机号:手机号格式
  6. 出生日期:非空
  7. 验证码:非空

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" href="css/register.css">
    <!--导入jquery-->
    <script src="js/jquery-3.3.1.js"></script>

    <script>
        //校验用户名
        function checkUsername() {
            //1.获取用户名值
            var username = $("#username").val();
            //2.定义正则
            var reg_username = /^\w{8,20}$/;
            //判断 给出提示信息
            var flag = reg_username.test(username);
            if (flag) {
                //用户名合法
                $("#username").css("border", "")
            } else {
                //用户名违法
                $("#username").css("border", "1px solid red");
            }

            return flag;

        }

        //校验密码
        function checkPassword() {
            //1.获取密码值
            var password = $("#password").val();
            //2.定义正则
            var reg_password = /^\w{8,20}$/;
            //判断 给出提示信息
            var flag = reg_password.test(password);
            if (flag) {
                //用户名合法
                $("#password").css("border", "")
            } else {
                //用户名违法
                $("#password").css("border", "1px solid red");
            }

            return flag;
        }

        //校验邮箱
        function checkEmail() {
            //1.获取邮箱值
            var email = $("#email").val();
            //2.定义正则
            var reg_email = /^\w+@\w+\.\w+$/;
            //判断 给出提示信息
            var flag = reg_email.test(email);
            if (flag) {
                //用户名合法
                $("#email").css("border", "")
            } else {
                //用户名违法
                $("#email").css("border", "1px solid red");
            }

            return flag;
        }
        //校验姓名
        function checkname(){
            //1.获取姓名值
            var name = $("#name").val();
            //2.定义正则
            var reg_name = /^\w+$/;
            //判断 给出提示信息
            var flag = reg_name.test(name);
            if (flag) {
                //用户名合法
                $("#name").css("border", "")
            } else {
                //用户名违法
                $("#name").css("border", "1px solid red");
            }

            return flag;
        }
        //校验手机号
        function checktelephone(){
            //1.获取手机号值
            var telephone = $("#telephone").val();
            //2.定义正则
            var reg_telephone = /^\w+(?:(?!0)\d*|0)?$/;
            //判断 给出提示信息
            var flag = reg_telephone.test(telephone);
            if (flag) {
                //用户名合法
                $("#telephone").css("border", "")
            } else {
                //用户名违法
                $("#telephone").css("border", "1px solid red");
            }

            return flag;
        }
        //校验出生日期
        function checkbirthday(){
            //1.获取出生日期值
            var birthday = $("#birthday").val();
            //2.定义正则
            var reg_birthday = /^\d{4}-\d{2}-\d{2}$/;
            //判断 给出提示信息
            var flag = reg_birthday.test(birthday);
            if (flag) {
                //用户名合法
                $("#birthday").css("border", "")
            } else {
                //用户名违法
                $("#birthday").css("border", "1px solid red");
            }

            return flag;
        }
        //校验验证码
        function check(){
            //1.获取验证码值
            var check = $("#check").val();
            //2.定义正则
            var reg_check = /^\w+$/;
            //判断 给出提示信息
            var flag = reg_check.test(check);
            if (flag) {
                //用户名合法
                $("#check").css("border", "")
            } else {
                //用户名违法
                $("#check").css("border", "1px solid red");
            }

            return flag;
        }


        $(function () {
            //当表单提交时 调用所有的校验方法
            $("#registerForm").submit(function () {
                return checkUsername() && checkPassword() && checkEmail()
                    && checkname() && checktelephone() && checkbirthday() && check();
                //如果这个方法没有返回值 或者返回位true 则表单提交 如果返回为false 则表单不提交
            });
            //当某一个组件失去焦点是 调用对应的校验方法
            $("#username").blur(checkUsername);
            $("#password").blur(checkPassword);
            $("#email").blur(checkEmail);
            $("#name").blur(checkname);
            $("#telephone").blur(checktelephone);
            $("#birthday").blur(checkbirthday);
            $("#check").blur(check);
        })
    </script>


</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<div class="rg_layout">
    <div class="rg_form clearfix">
        <div class="rg_form_left">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
        </div>
        <div class="rg_form_center">
            <div id="errorMsg" style="color:red;text-align: center"></div>
            <!--注册表单-->
            <form id="registerForm" action="user">
                <!--提交处理请求的标识符-->
                <input type="hidden" name="action" value="register">
                <table style="margin-top: 25px;">
                    <tr>
                        <td class="td_left">
                            <label for="username">用户名</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="username" name="username" placeholder="请输入账号">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="password">密码</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="password" name="password" placeholder="请输入密码">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="email">Email</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="email" name="email" placeholder="请输入Email">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="name">姓名</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="name" name="name" placeholder="请输入真实姓名">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="telephone">手机号</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="sex">性别</label>
                        </td>
                        <td class="td_right gender">
                            <input type="radio" id="sex" name="sex" value="男" checked> 男
                            <input type="radio" name="sex" value="女"> 女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="birthday">出生日期</label>
                        </td>
                        <td class="td_right">
                            <input type="date" id="birthday" name="birthday" placeholder="年/月/日">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="check">验证码</label>
                        </td>
                        <td class="td_right check">
                            <input type="text" id="check" name="check" class="check">
                            <img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)">
                            <script type="text/javascript">
                                //图片点击事件
                                function changeCheckCode(img) {
                                    img.src = "checkCode?" + new Date().getTime();
                                }
                            </script>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                        </td>
                        <td class="td_right check">
                            <input type="submit" class="submit" value="注册">
                            <span id="msg" style="color: red;"></span>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div class="rg_form_right">
            <p>
                已有账号?
                <a href="login.html">立即登录</a>
            </p>
        </div>
    </div>
</div>
<!--引入尾部-->
<div id="footer"></div>
<!--导入布局js,共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>

</body>
</html>

运行结果

 

 

标签:用户名,功能分析,表单,flag,旅游网,var,border,reg,css
来源: https://www.cnblogs.com/aimz01/p/16619473.html