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

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

当用户登录页面时，没有验证
验证从用户单击"名称查询"字段开始，并在键向上和焦点向外时进行验证
表单提交时也会验证字段：如果字段无效，单击提交按钮只会显示验证消息；只有当该字段有效时，才会提交表单

这是我想出的一个片段：

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>

几个问题：

我用了两次var isValid = myForm.valid();，似乎有点重复，但我想不出更简洁的方法了
如果字段有效，单击提交按钮会导致所有内容消失吗
我的代码片段有什么改进吗

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

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();
};
});

它们在同一个元素上操作，内部的逻辑看起来很相似。

答案：

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

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( 我已经改进了一点。你可以看到上面的

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

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

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

验证从用户单击"名称查询"字段开始，它在向上键和向外聚焦上进行验证

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

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

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

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

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

您真的需要查看文档才能理解这里的一切。很少有需要外部事件处理程序函数的情况，所以如果需要，它就会变得比需要的复杂得多。在这一点上，你还不如从头开始编写自己的自定义验证函数。

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

相关内容

最新更新

热门标签：