模糊上的jquery验证插件[重复]

Posted 2023-05-09

【中文标题】模糊上的jquery验证插件[重复]

【英文标题】：jquery validation plugin on blur [duplicate]

【发布时间】：2018-05-18 00:46:52

【问题描述】：

朋友们，我是 javascripting 和 jQuery 的新手，需要您的帮助来解决 2 个问题。我正在将 jquery 验证插件 https://jqueryvalidation.org 用于在不同页面上包含多个表单的项目。

问题 #1

我包含了一个自定义的 JS 文件，它已经有

$(document).ready(function() 
  //some codes
);

要在不同页面上执行具有不同属性的插件，需要在 document.ready 中对其进行初始化，即

$(document).ready(function() 
  $("#theForm").validate();
);

那么这样可以将文件准备好 2 次吗？

问题 #2

这个插件在点击提交按钮后工作。我希望它也验证输入字段的 onblur。它确实具有在 onfocusout 上进行验证的属性，但也可以在单击提交按钮后处理错误。 那么，在点击提交按钮之前，有没有办法让验证也适用于 blur 或 focusout？

任何帮助将不胜感激。先谢谢各位朋友了。

【问题讨论】：

“那么，在点击提交按钮之前，有没有办法让验证也适用于模糊或聚焦？” ~ 是的，该插件利用“惰性”验证和您更喜欢“急切”的验证。有一个比手动操作类的自定义 blur 处理程序更简单的解决方案。见：***.com/questions/29521336/…

【参考方案1】：

是的，是的。您的页面上可以有任何$(document).ready();。在元素在 DOM 中呈现之前定义方法、函数时需要它。

如果您将 javascript 放在页面的最底部（在您的 html 元素呈现之后），您可以离开它。

例如，在这种情况下它需要：

<script>
   //before create the element
   $(function()  //same as document ready
       $('#element').on('click', function () 
          alert('Hi');
       );
   );
</script>

<div id="element">some text</div>

但在这种情况下不是：

<div id="element"></div>
<script>
   //Your element has already rendered
   $('#element').on('click', function () 
      alert('Hi');
   );
</script>

您可以在模糊上使用您的验证。

$('#myInput').on('blur', function() 
   $("#theForm").validate();
);

这些是基础知识，当您通过 javascript 操作 DOM 时，那就是另一回事了。

【讨论】：

$(document)，不是$.(document)

@SeanKendle 已修复，谢谢。

@vaso123 谢谢朋友，但你的模糊功能不起作用。 $("#theForm").validate();只是告诉从哪个验证，而验证仍然在单击提交按钮后发生。我希望即使在模糊或聚焦时也能进行验证

应该的。您应该将 #myInput 更改为您要检查的输入。如果要检查更多输入，请向这些输入添加一个类，并在这些类上进行验证。请阅读事件处理程序和选择器。

@vaso123 朋友 .validate();是告诉脚本要验证哪些元素，但它仍然只在单击提交按钮后才验证。 。证实（）;命令 do 开始验证过程

【参考方案2】：

使用它来验证模糊：

$(document).ready(function() 
    var $theForm = $("#theForm"),
        $form = $theForm.validate();
    //changed to check every textbox type input inside #theForm:
    $theForm.on("blur", "input[type='text']", function(e)
        //use element() to test only one element:
        if ($form.element(this)) 
            console.log("is valid");
        
    );

);

Validator.form()

说明：验证表单，如果有效则返回true，false 否则。

---

Validator.element(元素)

描述：验证单个元素，如果有效则返回true， 否则为假。

更多信息：

https://jqueryvalidation.org/Validator.form/

https://jqueryvalidation.org/Validator.element/

工作示例：

https://codepen.io/anon/pen/wPOrrx

【讨论】：

朋友它不工作。

您有错误吗？您的输入是否具有 ID“myInput”？展示你的作品。

我已将其更改为检查表单中text 类型的每个 输入。确保您的表单确实具有 id="theForm" 作为属性。

codepen.io/anon/pen/NwJadB

对不起朋友，一定是误点击错了。你的答案是正确的，我正在使用你的代码。再次感谢