Jquery对注册表单校验

Jquery对注册表单校验

* form表单
<form id="registerForm">
    <div id="errorMsg" style="color: red;text-align: center"></div>

    <!--提交处理请求的标识符-->
    <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>

* jquery的校验代码
<script>
    //校验username  8-20位
    function checkUsername() {
        var username = $("#username").val();
        //定义正则
        var reg = /^\w{8,20}$/;
        //校验
        var flag = reg.test(username);
        if (flag){
            //验证成功
            $("#username").css("border","");

        }else {
            //验证失败
            $("#username").css("border","1px solid red");
        }

        return flag;
    }


    //校验password 6-20位
    function checkPassword() {
        var password = $("#password").val();
        //定义正则
        var reg = /^\w{6,20}$/;
        //校验
        var flag = reg.test(password);
        if (flag){
            //验证成功
            $("#password").css("border","");

        }else {
            //验证失败
            $("#password").css("border","1px solid red");
        }

        return flag;
    }

    //校验email
    function checkEmail(){
        var email = $("#email").val();

        //定义正则校验邮箱
        var reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
        var flag = reg.test(email);
        if (flag){
            //验证成功
            $("#email").css("border","");

        }else {
            //验证失败
            $("#email").css("border","1px solid red");
        }
        return flag;
    }

    //校验姓名
    function checkName(){
        var name = $("#name").val();
        //校验姓名,包含中英文
        var reg = /^[\u4e00-\u9fa5_a-zA-Z0-9_]{4,10}$/

        var flag = reg.test(name);
        if (flag){
            //验证成功
            $("#name").css("border","");

        }else {
            //验证失败
            $("#name").css("border","1px solid red");
        }
        return flag;
    }

    //校验手机号
    function checkTelephone(){
        var phone = $("#telephone").val();
        //定义正则 校验phone
        var reg = /^1[34578]\d{9}$/;
        var flag = reg.test(phone);
        if (flag){
            //验证成功
            $("#telephone").css("border","");

        }else {
            //验证失败
            $("#telephone").css("border","1px solid red");
        }
        return flag;
    }

    //校验出生日期 非空
    function checkBirth(){
        var birth = $("#birthday").val();
        if (birth.length == 0 || birth == ""){
            //空
            var flag = false;
            $("#birthday").css("border","1px solid red");
            return flag;
        }else {
            //非空
            $("#birthday").css("border","");
            var flag = true;
            return flag;
        }

    }

    //校验验证码 非空
    function checkCode(){
        var code = $("#check").val();
        if (code.length == 0 || code == ""){
            //空
            var flag = false;
            $("#check").css("border","1px solid red");
            return flag;
        }else {
            //非空
            $("#check").css("border","");
            var flag = true;
            return flag;
        }

    }

    //入口函数
    $(function () {
        //表单提交的时候校验
        $("#registerForm").submit(function () {
            if (checkUsername() && checkPassword() && checkEmail() && checkName() && checkTelephone() &&
                checkBirth() && checkCode()) {
                //异步提交ajax请求
                $.post("user/register",$(this).serialize(),function (data) {
                    if (data.flag){
                        //成功
                        location.href = "http://localhost/travel/register_ok.html";
                    }else {
                        //失败
                        $("#errorMsg").html(data.errorMsg)
                    }

                });

            }
            return false; //不让表单提交,只是通过异步来传递到servlet
        });

        //失去焦点的时候校验
        $("#username").blur(checkUsername);
        $("#password").blur(checkPassword);
        $("#email").blur(checkEmail);
        $("#name").blur(checkName);
        $("#telephone").blur(checkTelephone);
        $("#birthday").blur(checkBirth);
        $("#check").blur(checkCode);
    })

</script>