需要复杂jquery验证逻辑的解决方案

Question

我在我的 rails 应用程序中使用 jquery 验证。我想将某些规则与某些触发器相关联。我在编写逻辑时遇到了麻烦。我会尽可能清楚地解释我想要什么。

规则：

1. 最大长度为 25 个字符。
2. 最少 3 个字符。
3. 字符只能是字母数字或空格。

触发器：

1. maxlength 应该只在 keyup 时触发。
2. minlength 应该只在提交时触发。
3. 无效字符应触发 onkeyup。

当少于 3 个字符时，我在如何让无效字符触发 keyup 的逻辑上遇到问题。我用于无效字符的正则表达式是/^[a-z\d ]+$/i。

这是我的代码：

$('#custom-tag').validate({
    onkeyup: function (element, event) {
            if (event.which === 9 && this.elementValue(element) === "") {
                return;
            } else if (this.elementValue(element).replace(/\s+/g, ' ').trim().length < 3)  {
                return;
            } else {
                this.element(element);
            }
    },

    rules: {
      tag: {
        minLen: 3,
        maxLen: 25,
        format: true
      }
    }
  });
 });

更新：

我试图通过向同一个表单添加第二个验证来使其工作。代码在这里：

$('.custom-tag-onkeyup').validate({
    onkeyup: function (element, event) {
            if (event.which === 9 && this.elementValue(element) === "") {
                return;
            } else {
                this.element(element);
            }
    },
    rules: {
      tag: {
        maxLen: 25,
        alphanumeric: true
      }
    },
    tooltip_options: {
      tag: { placement: 'right', animation: false }
    }
  });

  $('.custom-tag-onblur').validate({
    onkeyup: false,
    onfocusout: function (element, event) {
                if (event.which === 9 && this.elementValue(element) === "") {
                  return;
                } else {
                  this.element(element);
                }
    },
    rules: {
      tag: {
        minlength: 3
      }
    },
    tooltip_options: {
      tag: { placement: 'right', animation: false }
    }
  });

我正在向我的表单添加两个类，因此我可以通过两种不同的方式对其进行验证，但它似乎不起作用。似乎一次只有一个验证有效。我做错了什么？

Answer 1

您可以尝试以下两种方法：

方法一

根据我的评论，您可以在 keyup 上测试值有效性和在 blur 上测试长度。这种方法的问题是您必须维护 2 个不同的错误标签。

方法2

您可以允许用户输入任何数据并在blur 上进行验证。这种方法的好处是，您将仅在用户完成输入后进行验证，并且将忽略任何拼写错误的情况。

以下 [JSFiddle] 中描述了这两种方法。(http://jsfiddle.net/RajeshDixit/ynby1an8/)

代码

function validateInput(el){
	var regex = /^[a-z\d ]+$/i;
  if(!regex.test(el.value)){
  	$("#err_valid").fadeIn()
  }
  else{
  	$("#err_valid").fadeOut()
  }
}

function validateLength(el){
	if(el.value.length <3){
  	$("#err_length").fadeIn()
  }
  else{
  	$("#err_length").fadeOut()
  }
}

$("#text2").on("blur", function(e){
	var regex = /^[a-z\d ]+$/i;
	if(!regex.test($(this).val())){
  	$("#err_both").text("Invalid Data").fadeIn();
  }
  else if($(this).val().length < 3){
  	$("#err_both").text("Enter at least 3 characters").fadeIn();
  }
  else{
  	$("#err_both").fadeOut();
  }
})

.error{
  display:none;
  color:red;
}

<input type="text" id="text" onkeyup="validateInput(this)" onblur="validateLength(this)" maxlength=25>
<p class="error" id="err_valid">Invalid entry</p>
<p class="error" id="err_length">Enter at least 3 characters.</p><br/>

<input type="text" id="text2">
<p class="error" id="err_both">Invalid entry</p>

希望这会有所帮助！