前台表单的校验

一个简单的注册表单的前台校验

前台表单的校验

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

        //校验用户名
        function checkUsername() {
            //获取用户名
            var username = $("#username").val();
            //定义正则,单词字符，长度8到20位
            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();
            //定义正则，单词字符，长度8到20位
            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;
        }


        //校验姓名:非空
        function checkName() {
            //获取名字
            var realName = $("#realname").val();

            //判断是否为空
            if(realName != null && realName != "") {
                //不为空，格式合法
                $("#realname").css("border","");
                return true;
            }else{
                //为空，格式不合法
                $("#realname").css("border","1px solid red");
                return false;
            }
        }

        //检验手机号
        function checkPhone() {
            //获取手机号
            var phone = $("#phone").val();

            //定义正则
            var reg_phone = /^1[3456789]\d{9}$/;

            //判断
            var flag = reg_phone.test(phone);
            if(flag) {
                //格式正确
                $("#phone").css("border","");
            }else{
                //格式不正确
                $("#phone").css("border","1px solid red");
            }

            return flag;
        }

        //检验验证码
        function checkCode() {
            //获取验证码
            var code = $("#checkCode").val();

            //判断验证码不能为空
            if(code != null && code != "") {
                //不为空合法
                $("#checkCode").css("border","");
                return true;
            }else{
                $("#checkCode").css("border","1px solid red");
                return false;
            }
        }

        //外层是个入口函数，相当于javascript中的window.onload()函数
        $(function() {
            //根据表单id获取表单，当表单提交时，调用所有的校验方法
            $("#registerForm").submit(function() {
                //当submit方法没有返回值，或者返回值为true时，则表单提交，如果返回false，则表单不提交
                return checkUsername() && checkPassword() && checkEmail() && checkName && checkPhone() && checkCode();
            });
            //当某个组件失去焦点时，调用相应的校验方法
            //根据username的id获取用户名
            $("#username").blur(checkUsername); //传入一个函数对象，不能加括号
            $("#password").blur(checkPassword);
            $("#email").blur(checkEmail);
            $("#realname").blur(checkName);
            $("#phone").blur(checkPhone);
            $("#checkCode").blur(checkCode);
        })