Jquery验证:3个字段一条错误消息

时间:2016-11-22 20:10:45

标签: jquery validation

我有3个可选的文本框:

<input id="editArea" maxlength="3" onkeyup="tabout(this,'editPrefix')" name="editArea" class="accountEdit" type="text" value="@Model.Pharmacy.Area"/>
<input id="editPrefix" maxlength="3" onkeyup="tabout(this,'editSuffix')" name="editPrefix" class="accountEdit" type="text" value="@Model.Pharmacy.Prefix"/>
<input id="editSuffix" maxlength="4" onkeyup="tabout(this,'editPrefix')" name="editSuffix" class="accountEdit" type="text" value="@Model.Pharmacy.Suffix"/>

我想验证他们的总和恰好是10位数,以防用户输入任何数据。

验证规则:

 $("#Fields").validate({
    errorElement:'div',
    rules: {                                       
        editZip:{
            required: true,
            zipregex:/^([^A-Za-z]*)$/,
        },
        editArea: {
            required:false
        },
        editPrefix: {
            required:false
        },
        editSuffix: {
            required:false
        },
        submitHandler: function (form) {
            return false;
        }
    },
    messages: {                       
        editZip: {
            required:"Enter the zip code."
        }                  
    }
})

我该如何处理?

1 个答案:

答案 0 :(得分:0)

在验证插件之外,您只需添加值长度并检查它是否为10。

var len_editArea =   $( "input#editArea" ).val().length;
var len_editPrefix = $( "input#editPrefix" ).val().length;
var len_editSuffix = $( "input#editSuffix" ).val().length;

if(len_editArea + len_editPrefix + len_editSuffix == 10){

   alert("okidokey");

}

使用插件,您可以使用$ .validator.addMethod()。这看起来像这样:

$.validator.addMethod('sum',function(value,element){
   var lengths = 0;
   var parent = $(element).parent('div');
   $(parent).find('input').each(function () {
      lengths = parseInt($(this).val().length) + lengths;
   });
   if (lengths == params[0]){
      return true;
   } else {
      return false;
   }
});

$(".accountEdit").rules('add', {sum: 10});

请查看此处的文档:https://jqueryvalidation.org/jQuery.validator.addMethod