需要复杂的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

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

方法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>

希望这有帮助！