jquery vlidator 驗證示例

var phoneReg = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;

var count = 60;
$.validator.addMethod("isMobile", function (value, element) {
    var length = value.length;
    var mobile = phoneReg;
    return this.optional(element) || (length == 11 && mobile.test(value));
}, "請正確填寫您的手機號碼");

$(function () {

    $('#register').click(function () {
        $('#form').submit();
    });

    $('#form').validate({
        rules: {
            phone: {
                required: true,
                isMobile: true,
                remote: '@{controllers.CommonController.checkPhone()}'
            },
            valCode: {
                required: true,
                rangelength: [4, 4],
                remote: {
                    url:'@{controllers.CommonController.checkValCode()}',
                    type:'post',
                    data:{
                        phone:function(){return $('#phone').val()},
                        valCode:function(){return $('#valCode').val()},
                        authenticityToken:$('input[name=authenticityToken]').val()
                    }
                }
            },
            password: {
                required: true,
                rangelength: [6, 20],
            },
            confirmPassword: {
                required: true,
                rangelength: [6, 20],
                equalTo: '#password'
            },
            agree: {
                required: true
            }
        },
        messages: {
            phone: {
                required: '手機號碼不能爲空',
                isMobile:'請填寫正確的手機號碼',
                remote: '此手機號碼已註冊過本系統'
            },
            valCode: {
                required: '請輸入驗證碼',
                rangelength: '驗證碼的長度爲4',
                remote:'請輸入正確的驗證碼'
            },
            password: {
                required: '密碼不能爲空',
                rangelength: '密碼的長度爲6-20個字符',
            },
            confirmPassword: {
                required: '確認密碼不能爲空',
                rangelength: '確認密碼的長度爲6-20個字符',
                equalTo: '確認密碼必須與密碼相同'
            },
            agree: {
                required: '請閱讀條款並贊成'
            }
        },
        errorPlacement: function (error, element) {
            error.appendTo(element.parent());
        },
        submitHandler: function () {
            var password = $('#password').val();
            var confirmPassword = $('#confirmPassword').val();

            utils.post({
                url: '@{controllers.ExpertController.doRegist()}',
                data: {
                    phone: $('#phone').val(),
                    password: $('#password').val(),
                    confirmPassword: $('#confirmPassword').val(),
                    captcha: $('#valCode').val(),
                    isAccept: $('#agree').is(":checked")
                },
                success: function (data) {
                    if (data.code == 200) {
                        showAlert('success', '成功', '註冊成功');
                        setTimeout(function () {
                            window.location.href = '@{controllers.ExpertController.login()}';
                        }, 1.5 * 1000);
                    } else {
                        showAlert('warning', '提示', data.msg);
                    }
                }
            });
        }
    });

    bindSendCodeEvent();

});


function bindSendCodeEvent() {
    $('.hq').bind('click', function () {
        var phone = $('#phone').val();
        if (!phoneReg.test(phone)) {
            showAlert('warning', '提示', '請輸入正確的手機號碼');
            return;
        }
        utils.post({
            url: '@{CommonController.sendSms()}',
            data: {
                phoneNum: phone
            },
            success: function (data) {
                if (data.code == 200) {
                    $('.hq').unbind('click');
                    countDown();
                }else{
                    showAlert('warning', '提示', data.msg);
                }
            }
        });

    });
}

function countDown() {
    setTimeout(function () {
        if (count > 0) {
            count -= 1;
            $('.hq').text(count + 's');
            countDown();
        } else {
            $('.hq').text('發送驗證碼');
            count = 60;
            bindSendCodeEvent();
        }
    }, 1 * 1000);
}

function showAlert(name, title, content) {
    $("#alertModal .model-alert").text(title);
    $("#alertModal .model-content").text(content);
    $(".alert").addClass("alert-" + name);
    $("#alertModal").modal('show')
}