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

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

当用户登录页面时，不会进行任何验证

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

字段在表单提交时也会进行验证：如果字段无效，单击“提交”按钮除了显示验证消息外，不应执行任何操作；表单仅在字段有效时提交 下面是我想到的一个片段：

var myForm=$（“#myForm”），
nameQuery=$（“#nameQuery”）；
myForm.validate({
规则：{
NameQuery：“必需”
},
信息：{
名称查询：“请填写名称查询”
}
});
nameQuery.on（“focusout keyup提交”，函数（）{
var isValid=myForm.valid（）；
如果（！isValid）{
nameQuery.addClass（“警报文本”）；
}
否则{
removeClass（“警报文本”）；
};
});
nameQuery.on（“提交”，函数（）{
var isValid=myForm.valid（）；
如果（有效）{
$（“p”）.html（“表格汇总”）；
}
否则{
$（“p”）.empty（）；
};
});
。警报文本{
边框：1px红色虚线；
}

姓名查询：

答案：


1） 如果它看起来重复
var isValid=myForm.valid（）然后使用
if（myForm.valid（））
这个。


2） 所有内容都会消失，因为您正在对输入框而不是表单调用submit函数，并且默认的表单提交行为是refresh。
请尝试下面的代码


var myForm=$（“#myForm”），
nameQuery=$（“#nameQuery”）；
myForm.validate({
规则：{
NameQuery：“必需”
},
信息：{
名称查询：“请填写名称查询”
}
});
nameQuery.on（“focusout keyup提交”，函数（）{
如果（！myForm.valid（））{
nameQuery.addClass（“警报文本”）；
}
否则{
removeClass（“警报文本”）；
};
});
myForm.on（“提交”，功能（e）{
e、 预防默认值（）；
if（myForm.valid（））{
$（“p”）.html（“提交的表格”）；
}
否则{
$（“p”）.empty（）；
};
});
。警报文本{
边框：1px红色虚线；
}

姓名查询：

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

当用户登录页面时，不会进行任何验证

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

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

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

字段在表单提交时也会进行验证：如果字段无效，单击“提交”按钮除了显示验证消息外，不应执行任何操作；表单仅在字段有效时提交

这就是这个插件在正确使用时的工作原理

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

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


。很少有需要外部事件处理函数的情况，所以如果需要，它就会变得比需要的复杂。此时，您最好从头开始编写自己的自定义验证函数

当表单有效且正在提交时，此插件具有自定义代码的
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”）；//这里不需要。
/*插件只使用NAME属性，不使用ID和未分配的变量*/
myForm.validate({
规则：{
NameQuery：“必需”
},
信息：{
名称查询：“请填写名称查询”
},
onkeyup：函数（元素）{
this.element（element）；//需要向OP演示如何正确使用此插件。外部事件处理程序杂乱无章，不必要，并且会干扰插件，因此应该将其完全删除并替换为插件提供的正确选项。