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

Question

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

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

下面是我想出的一个片段：

​

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. 我的片段能以任何方式改进吗？

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

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

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

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

这已经是这个插件的默认行为了。除了插件初始化之外，页面加载时什么都不会发生，用户看不到插件初始化。

验证从用户单击“名称查询”字段开始，并对“向上”和“焦点”进行验证。

这被称为“急切”验证，默认情况下插件是“懒惰”的。有一种简单的方法可以实现“急切”而不需要任何外部事件处理程序。

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

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

我所说的重复代码和更简洁的代码，我的意思是，这两个部分可以合并为1部分吗？

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

你真的需要复习一下文档才能理解这里的一切。很少有需要外部事件处理程序函数的情况，因此如果需要，它就会变得比需要的复杂得多。此时，您最好从头开始编写您自己的自定义验证函数。

当表单有效且正在提交时，此插件具有用于自定义代码的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>

​

Answer 2

答案：

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

2)由于在输入框而不是表单上调用submit函数，所有内容都消失了，默认的表单提交行为是刷新的。试试下面的代码

​

  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)我把它改进到了一点。你可以在上面看到