《黑马旅游网》综合案例二 注册功能前台

分析

 

 表单校验

 

代码实现

 

　　1.前台效果

 

　　　　1.表单校验

 

　　　　2.异步(ajax)提交表单

 

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

 

 register.html：

 

在表单提交一个属性

 

 

 

编写script

        <script>
            /*
                表单校验：
                    1.用户名：单词字符，长度8到20位
                    2.密码：单词字符，长度8到20位
                    3.email：邮件格式
                    4.姓名：非空
                    5.手机号：手机号格式
                    6.出生日期：非空
                    7.验证码：非空
             */
            //校验用户名
            function checkUsername() {
                //获取用户名值
                var username = $("#username").val();
                //定义正则
                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() {
                //获取用户名值
                var password = $("#password").val();
                //定义正则
                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(){
                //获取对应的邮箱
                var email = $("#email").val();
                //定义正则
                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;
            }
            //4.姓名：非空
            function checkName(){
                //获取用户名
                var name = $("#name").val();
                //定义正则，非空
                var reg_name = /^[\u4e00-\u9fa5A-Za-z]+$/;
                //判断输入的是否合法
                var flag = reg_name.test(name);
                if (flag){
                    $("#name").css("border","")
                }else {
                    $("#name").css("border","1px solid red")
                }
                return flag;
            }
            //5.手机号：手机号格式
            function checkTelephone() {
                //1.获取用户名
                var telephone = $("#telephone").val();
                //2.定义正则, 11位
                var reg_telephone = /^\d{11}$/;
                //3.判断输入的是否合法
                var flag = reg_telephone.test(telephone);
                if(flag) {
                    $("#telephone").css("border","");
                } else {
                    $("#telephone").css("border","1px solid red");
                }
                return flag;
            }
            //6.出生日期：非空
            function checkBirthday() {
                //1.获取用户名
                var birthday = $("#birthday").val();
                //2.定义正则, 非空
                var reg_birthday = /^\d{4}-\d{2}-\d{2}$/;
                //3.判断输入的是否合法
                var flag = reg_birthday.test(birthday);
                if(flag) {
                    $("#birthday").css("border","");
                } else {
                    $("#birthday").css("border","1px solid red");
                }
                return flag;
            }
            //7.验证码：非空
            function checkCheckCode(){
                //获取用户名
                var check = $("#check").val();
                //定义正则
                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() && checkCheckCode();
                    //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回false，则不提交
                });
                //当某一个组件失去焦点时，调用对应的校验方法
                $("#username").blur(checkUsername);
                $("#password").blur(checkPassword);
                $("#email").blur(checkEmail);
                $("#name").blur(checkName);
                $("#telephone").blur(checkTelephone);
                $("#birthday").blur(checkBirthday);
                $("#check").blur(checkCheckCode);
            });
        </script>

 

 

异步提交表单

　在此使用异步提交表单是为了获取服务器响应的数据。因为我们前台使用的是html作为视图层，

不能直接从Servlet相关的域对象获取值，只能通过ajax获取响应数据

对其进行修改添加一个div用来显示错误信息：

添加了个if判断进行异步提交

            $(function () {
                //当表单提交时，调用所有的校验方法
                $("#registerForm").submit(function () {
                    //发送数据到服务器
                    if (checkUsername() && checkPassword() && checkEmail() && checkName() && checkTelephone() && checkBirthday() && checkCheckCode()){
                        //校验通过，发送ajax请求，提交表单的数据
                        $.post("registUserServlet",$(this).serialize(),function (data) {
                            //处理服务器响应的数据
                            if (data.flag){
                                //注册成功，跳转成功页面
                                location.href="register_ok.html";
                            }else {
                                //注册失败
                                $("#errorMsg").html(data.errorMsg);
                            }
                        });
                    }
                    return false;
                    //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回false，则不提交
                });
                //当某一个组件失去焦点时，调用对应的校验方法
                $("#username").blur(checkUsername);
                $("#password").blur(checkPassword);
                $("#email").blur(checkEmail);
                $("#name").blur(checkName);
                $("#telephone").blur(checkTelephone);
                $("#birthday").blur(checkBirthday);
                $("#check").blur(checkCheckCode);
            });