發表於 程式分享

jquery bootstrapValidator如何驗證2個欄位只輸入其一即可

期望的畫面如下

1
畫面的html如下

1

 

1.jquery bootstrapValidator如何驗證2個欄位只輸入其一即可

    //被授權人
    $('#rowAddAuthForm').bootstrapValidator({
        excluded: [':disabled'],
        fields: {
            telNo: {
                group: '.col-md-3',
                validators: {
                    callback: {
                        callback: function(value, validator, $field) {
                            var field_name = $($field).attr('name');
                            if (value.length == 0 && $('#mobileNo_auth').val() == '') {
                                return {
                                    valid: false,
                                    message: '連絡電話、手機請至少輸入其一'
                                }
                            }
                            
                            if ($('#mobileNo_auth').val() == '') {
                                $('#rowAddAuthForm').bootstrapValidator('resetField', 'mobileNo' )
                                     .bootstrapValidator('updateStatus', 'mobileNo', 'VALID');
                                $('#rowAddAuthForm').bootstrapValidator('disableSubmitButtons', false);
                            }
                            
                            $('#rowAddCommForm').data('bootstrapValidator').resetForm(true);
                            if (value.length != 0) {
                                var pattern = /^[0-9]+$/;        
                                if (value.length  8) {
                                    return {
                                        valid: false,
                                        message: '電話 長度需為6~8'
                                    }
                                } else if (pattern.test(value) == false) {
                                    return {
                                        valid: false,
                                        message: '電話 請輸入數字'
                                    }
                                } else {
                                    return true;
                                }                                
                            } else {
                                $('#rowAddAuthForm').bootstrapValidator('resetField', field_name )
                                     .bootstrapValidator('updateStatus', field_name, 'NOT_VALIDATED');
                                $('#rowAddAuthForm').bootstrapValidator('disableSubmitButtons', false);
                                return true;
                            }
                        }
                    }
                }
            },
            mobileNo: {
                group: '.col-md-3',
                validators: {
                    callback: {
                        callback: function(value, validator, $field) {
                            var field_name = $($field).attr('name');
                            if (value.length == 0 && $('#telNo_auth').val() == '') {
                                return {
                                    valid: false,
                                    message: '連絡電話、手機請至少輸入其一'
                                }
                            }
                            
                            if ($('#telNo_auth').val() == '') {
                                $('#rowAddAuthForm').bootstrapValidator('resetField', 'telNo' )
                                        .bootstrapValidator('updateStatus', 'telNo', 'VALID');  
                                $('#rowAddAuthForm').bootstrapValidator('disableSubmitButtons', false);
                            }
                            
                            if (value.length != 0) {
                                var pattern = /^[0-9]+$/;        
                                if (value.length != 10) {
                                    return {
                                        valid: false,
                                        message: '手機號碼 長度需為10'
                                    }
                                } else if (pattern.test(value) == false) {
                                    return {
                                        valid: false,
                                        message: '手機號碼 請輸入數字'
                                    }
                                } else {
                                    return true;
                                }                                
                            } else {
                                $('#rowAddAuthForm').bootstrapValidator('resetField', field_name )
                                        .bootstrapValidator('updateStatus', field_name, 'NOT_VALIDATED');  
                                $('#rowAddAuthForm').bootstrapValidator('disableSubmitButtons', false);
                                return true;
                            }
                            
                        }
                    }
                }
            }
        }
    }).on('success.form.bv', function(e) {
        e.preventDefault();
        myfootable.auth_save(e);
        $("#addAuthModal").modal("hide");
    });    

2.bootstrapValidator如何判斷A欄位有值,B欄位也應有值 (反之,若A欄位無值,則B欄位無需有值)

    //被授權人
    $('#rowAddAuthForm').bootstrapValidator({
        excluded: [':disabled'],
        fields: {
            ...
            telRC: {
                validators: {
                    stringLength: {
                        min: 2,
                        max: 4,
                        message: '電話區碼 長度需為2~4'
                    },
                    regexp: {
                        regexp: /^[0-9]+$/,
                        message: '電話區碼 請輸入數字'
                    },
                    callback: {
                        callback: function(value, validator, $field) {
                            var field_name = $($field).attr('name');
                            if (value.length == 0 && $('#telNo_auth').val().length > 0) {
                                return {
                                    valid: false,
                                    message: '請輸入電話區碼'
                                }
                            } else {
                                return true;
                            }
                        }
                    }
                }                
            },
            ...
        }
    }).on('success.form.bv', function(e) {
        e.preventDefault();
        myfootable.auth_save(e);
        $("#addAuthModal").modal("hide");
    });    

註:bootstrapValidator的相關文件可參考 http://bv.doc.javake.cn/api/

發表留言