使用 JQuery 验证 OnInput 事件

Posted 2023-05-09

【中文标题】使用 JQuery 验证 OnInput 事件

【英文标题】：Validating OnInput event using JQuery

【发布时间】：2019-11-28 12:53:29

【问题描述】：

我正在处理一个要添加一些验证参数的表单。它是一个文本字段，当用户键入它时，我希望它针对正则表达式进行验证。我正在使用OnInput 事件。当它失败时，验证参数应该显示一个标签，当它成功时，验证参数是隐藏的。这似乎不起作用，，

请帮忙？

标记：

<input type="text" name="fName" id="fName" placeholder="First Name ..." class="input" required>
<label for="fName" id="firstNameErr" style="color: red; font-size: 14px; display: none;">Invalid First Name </label>

jQuery OnInput 验证：

$('#fName').on("input" , function(e) 
     var value = $('#fName').val();
       //Regex
       var fReg = /^[a-zA-Z'` ]+$/i

        //If true hide error label
        if (fReg.test(value)) 
           $("label#firstNameErr").hide();           
         
        else
           $('label#firstNameErr').show();
         
  );

【问题讨论】：

@charlietfl 你是对的 - 我的错。

该代码运行时<input> 是否存在？开发工具控制台中是否有任何错误？

@charlietfl 我已经编辑了我的问题，但它似乎不起作用，我在控制台中收到此错误 SyntaxError: missing after function body note: 在第 4 行第 37 列打开

不知道第 4 行是什么，但您需要修复阻止其余代码的错误

请不要编辑改变原始意图的有问题的代码。可能会导致与编辑前的答案发生冲突

【参考方案1】：

纯 CSS 解决方案

.oninvalid 
  color: red;
  font-size: 14px;
  display: none;


:invalid:not(:placeholder-shown) + .oninvalid 
  display: block;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" name="fName" id="fName" placeholder="First Name ..." class="input" pattern="^[a-zA-Z'` ]+$" required>
<label class="oninvalid" for="fName" id="firstNameErr">Invalid First Name </label>

Js方式

使用 jquery toggle() 因为它接受布尔值来显示/隐藏

$('#fName').on("input", function(e) 
  $("label#firstNameErr").toggle(! /^[a-zA-Z'` ]+$/i.test(this.value))
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" name="fName" id="fName" placeholder="First Name ..." class="input" required>
<label for="fName" id="firstNameErr" style="color: red; font-size: 14px; display: none;">Invalid First Name </label>

【讨论】：

@User683 非常感谢，，，如果我有一个用于提交的按钮想要禁用它，直到输入有效..是否可以使用 CSS？

@Martin 表单因无效而无法提交。 check here

使用您的 Js 解决方案，如果输入字段无效，如何禁用提交按钮并在输入字段有效后启用它。

@Martin 你问的是与这个问题无关的东西。您可以在网上找到很多相关信息

【参考方案2】：

您需要否定match 方法。以前，如果匹配，您将显示错误消息，但您希望它反过来。检查这个JS Bin。

    if (!value.match(fReg)) 
       $("label#firstNameErr").show();           
     
    else
       $('label#firstNameErr').hide();
     

【讨论】：

@charlietfl 查看他的第一个代码示例，逻辑不正确，输入内容有效时出现错误信息。

@charlietfl 我没有，我只是否定表达式value.match(fReg) 来反转结果。