注册功能分析以及表单校验

注册功能分析

 

 

 

表单校验

表单校验：

　　　1.用户名：单词字符，8到20位长度

　　　2.密码：单词字符，8到20位长度

　　　3.email：邮件格式

　　　4.姓名：非空

　　　5.手机号：手机号格式

　　　6.出生日期：非空

　　　7.验证码：非空

复制代码
<!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>
            /*
                表单校验：
                    1.用户名：单词字符，8到20位长度
                    2.密码：单词字符，8到20位长度
                    3.email：邮件格式
                    4.姓名：非空
                    5.手机号：手机号格式
                    6.出生日期：非空
                    7.验证码：非空
             */
            //校验用户名
            //单词字符，长度8到20位
            function checkUsername() {
                //1.获取用户名值
                let username = $("#username").val();
                //2.定义正则
                var reg_username = /^\w{8,20}$/;
                //3.判断，给出提示信息
                let flag = reg_username.test(username);
                if (flag){
                    //用户名合法
                    $("#username").css("border","");
                }else {
                    //用户名非法
                    $("#username").css("border","1px solid red");
                }

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

                return flag;
            }

            //校验邮箱
            function checkEmail() {
                //1.获取邮箱
                let email = $("#email").val();
                //2.定义正则
                var reg_email = /^\w+@\w+\.\w+$/;

                //3.判断
                let flag = reg_email.test(email);
                if (flag){
                    //真
                    $("#email").css("border","");
                }else {
                    //假
                    $("#email").css("border","1px solid red");
                }
                return flag;
            }
            


            $(function () {
                $("#registerForm").submit(function () {
                    return checkUsername && checkPassword && checkEmail();
                });

                //当某一个组件失去焦点是，调用对应的校验方法
                $("#username").blur(checkUsername);
                $("#password").blur(checkPassword);
                $("#email").blur(checkEmail);
            });
        </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">
                    
                    <!--注册表单-->
                    <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="#">立即登录</a>
                    </p>
                </div>
            </div>
        </div>
        <!--引入尾部-->
        <div id="footer"></div>
        <!--导入布局js，共享header和footer-->
        <script type="text/javascript" src="js/include.js"></script>
        
    </body>
</html>
复制代码

 

posted @   夫君  阅读(18)  评论(0)  编辑  收藏  举报
相关博文：
· 案例校验用户名是否存在
· HTML标签案例注册页面
· 注册功能分析以及表单校验
· 914~916 注册功能分析，表单校验
· 注册功能分析以及表单校验
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示