期望的畫面如下

畫面的html如下

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/
