Question

我正在处理要添加一些验证参数的表单。这是一个文本字段，我希望在用户键入时针对正则表达式进行验证。我正在使用<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>事件。如果失败，则验证参数将被隐藏；如果验证参数成功，则应显示标签。

请协助？

标记：

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

jQuery OnInput验证：

{{1}}

Answer 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>

Answer 2

您需要否定match方法。以前，如果匹配，则将显示错误消息，但反之亦然。选中此JS Bin。

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

使用JQuery验证OnInput事件

2 个答案:

纯CSS解决方案

Js方式