在这个 jQuery 验证案例中，如何避免重复 isValid？

Question

我正在尝试验证一个字段，我的主要目标是：

1. 当用户登陆页面时，没有验证
2. 验证从用户单击“名称查询”字段开始，并在上键和聚焦时进行验证
3. 表单提交时也会验证字段：如果字段无效，单击提交按钮只会显示验证消息；仅当字段有效时才会提交表单。

这是我想出的一个sn-p：

var myForm = $("#myform"),
    nameQuery = $("#NameQuery");

myForm.validate({
  rules: {
    NameQuery: "required"
  },
  messages: {
    NameQuery: "Please fill in name query"
  }
});

nameQuery.on("focusout keyup submit", function() {
  var isValid = myForm.valid();
  if (!isValid) {
    nameQuery.addClass("alert-text");
  }
  else {
    nameQuery.removeClass("alert-text");
  };
});

nameQuery.on("submit", function() {
  var isValid = myForm.valid();
  if (isValid) {
    $("p").html("Form sumitted");
  }
  else {
    $("p").empty();
  };
});

.alert-text {
  border: 1px dashed red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>


<form id="myform" method="post">
  <label for="NameQuery">Name Query: </label>
  <input type="text" id="NameQuery" name="NameQuery">
  <input type="submit" value="Search">
  <p></p>
</form>

几个问题：

1. 我用了两次var isValid = myForm.valid();，好像有点重复但是我想不出更简洁的方法？
2. 如果字段有效，点击提交按钮会导致一切消失？
3. 我的 sn-p 有什么改善吗？

编辑：通过说代码重复并且更简洁，我的意思是这两个部分可以合并为一个部分：

nameQuery.on("focusout keyup submit", function() {
  var isValid = myForm.valid();
  if (!isValid) {
    nameQuery.addClass("alert-text");
  }
  else {
    nameQuery.removeClass("alert-text");
  };
});

和

nameQuery.on("submit", function() {
  var isValid = myForm.valid();
  if (isValid) {
    $("p").html("Form sumitted");
  }
  else {
    $("p").empty();
  };
});

它们作用于同一个元素，内部逻辑看起来很相似。

Answer 1

答案：

1)如果看起来重复var isValid = myForm.valid();，那么使用if(myForm.valid())这个。

2）一切都消失了，因为您在输入框而不是表单上调用提交函数，并且默认的表单提交行为是刷新。 试试下面的代码

  var myForm = $("#myform"),
    nameQuery = $("#NameQuery");

myForm.validate({
  rules: {
    NameQuery: "required"
  },
  messages: {
    NameQuery: "Please fill in name query"
  }
});

nameQuery.on("focusout keyup submit", function() {
  if (!myForm.valid()) {
    nameQuery.addClass("alert-text");
  }
  else {
    nameQuery.removeClass("alert-text");
  };
});

myForm.on("submit", function(e) {
  e.preventDefault();
  if (myForm.valid()) {
    $("p").html("Form submitted");
  }
  else {
    $("p").empty();
  };
});

.alert-text {
  border: 1px dashed red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>


<form id="myform" method="post">
  <label for="NameQuery">Name Query: </label>
  <input type="text" id="NameQuery" name="NameQuery">
  <input type="submit" value="Search">
  <p></p>
</form>

3）我已经改进了一点。上面可以看到

Answer 2

你完全误解了这个插件可以为你做什么......

当用户登陆页面时，没有验证

这已经是这个插件的默认行为了。除了用户看不到的插件初始化之外，页面加载时没有任何反应。

验证从用户单击“名称查询”字段开始，并在按键和焦点移出时进行验证

这称为“渴望”验证，默认情况下插件是“惰性”的。有一种简单的方法可以在没有任何外部事件处理程序的情况下实现“eager”。

表单提交时也会验证字段：如果字段无效，单击提交按钮只会显示验证消息；只有在字段有效时才会提交表单。

这正是这个插件在正确使用时的工作方式。

通过说代码重复并且更简洁，我的意思是这两个部分可以合并为一个部分：

不，这两个部分应该完全删除。它们是多余的，因为插件已经为您提供了这些选项。

---

You really need to review the docs to understand everything here。很少有需要外部事件处理函数的情况，所以如果你这样做了，它就会变得比它需要的复杂得多。此时，您不妨从头开始编写自己的自定义验证函数。

这个插件有submitHandler 用于表单有效并提交时的自定义代码，onfocusout 和onkeyup 选项用于发生这些操作时的自定义代码，以及许多其他选项和配置。

对于输入周围的红色虚线，默认类是error，因此只需使用您的 CSS 定位该类即可。

input.error {
    /* this targets the input element with a pending validation error */
    border: 1px dashed red;
}

label.error [
    /* this targets the validation error message */
}

如果您确实需要更改默认类的名称，请使用errorClass 选项。

如果您在提交时需要其他自定义代码，请仅使用submitHandler。示例：通过 ajax 提交时。否则，对于常规提交，submitHandler 可以省略，插件的默认行为将是在表单有效时简单地提交。

使用onfocusout 和onkeyup 获取这些操作的自定义代码。如果您想要在初始提交尝试之前进行更急切的验证，例如验证，那么您可以将自定义代码放在这里来强制执行。否则，请删除这两个选项并重试。您的表单只有一个输入，因此它可能根本不重要，因为如果他们在字段和退格键中输入，验证就会启动。当用户在不输入任何内容的情况下通过多个输入选项卡时，渴望与懒惰是一个更大的问题。这里不是真的。

var myForm    = $("#myform");

// nameQuery = $("#NameQuery"); // NOT needed here.  
/* Plugin uses NAME attribute only, not ID and not assigned variables */

myForm.validate({
    rules: {
        NameQuery: "required"
    },
    messages: {
        NameQuery: "Please fill in name query"
    },
    onkeyup: function(element) {
        this.element(element);  // <- force "eager validation"
    },
    onfocusout: function(element) {
        this.element(element);  // <- force "eager validation"
    },
    // errorClass: "alert-text", // default is "error" - just use CSS
    submitHandler: function(form) {
        $("p").html("Form submitted"); // for demo
        // form.submit(); // default line, un-comment to submit when valid or leave out entire submitHandler to submit when valid
    }
});

input.error {
    border: 1px dashed red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>


<form id="myform" method="post">
    <label for="NameQuery">Name Query: </label>
    <input type="text" id="NameQuery" name="NameQuery">
    <input type="submit" value="Search">
    <p></p>
</form>