如何使用 jquery 进行数据验证？答案

【问题标题】：how to do data validation using jquery?如何使用 jquery 进行数据验证？
【发布时间】：2017-07-24 05:34:47
【问题描述】：

<form method="post" action="#">
            <div><label>Name :</label><input type="text" name="name" required="required"></div>
            <div><label>Phone :</label><input type="number" name="number" required="required"></div>
            <div><label>Email :</label><input type="email" name="email" required="required"></div>
            <div><label>Location :</label><input type="text" name="locaton" required="required"></div>
            <div class="wid100"><label>Requirement :</label><textarea rows="5" required="required"></textarea></div>
            <input type="submit" value="SEND" class="submit">
        </form>

请指导我...如何使用 onkeyup 对此进行数据验证

【问题讨论】：

标签： jquery validation form-post

【解决方案1】：

我建议您将事件更改为 onblur，而不是 keyup。无论如何满足您的要求。这将是下面的东西。

试试这个代码。

$(document).ready(function(){
    $("#n").keyup(function(){
     if($("#n").val()==""){
      $("#n").css("background-color", "red");
     }
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>

Enter your name: <input type="text" id="n">

<p>Enter your name in the input field above. It will change background color on keydown and keyup.</p>

</body>
</html>

【讨论】：

【解决方案2】：

您可以尝试在模糊事件中检查每个输入字段，例如当元素失去焦点并显示错误消息时

为每个输入添加一个 id 或一个类
为每个 id（或类）的 document.ready 事件添加一个事件处理程序

【讨论】：

【解决方案3】：

试试这个，

    $(function(){
      $('.inputField').on('blur',function(){
          if($(this).val()==""){
            
            $(this).parent('.inputFieldParent').find('.req').show();
            }else{     
            $(this).parent('.inputFieldParent').find('.req').hide();
             }
      });
    });

.req{
color:red;
display:none;
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form method="post" action="#">
                <div class="inputFieldParent"><label>Name :</label><input class="inputField" type="text" name="name" required="required">
                <span class="req">required</span>
                </div>
                <div class="inputFieldParent"><label>Phone :</label><input class="inputField" type="number" name="number" required="required"> <span class="req">required</span></div>
                <div class="inputFieldParent"><label>Email :</label><input class="inputField" type="email" name="email" required="required"> <span class="req">required</span></div>
                <div class="inputFieldParent"><label>Location :</label><input class="inputField" type="text" name="locaton" required="required"> <span class="req">required</span></div>
                <div class="wid100 inputFieldParent"><label>Requirement :</label><textarea class="inputField" rows="5" required="required"></textarea>
 <span class="req">required</span></div>
                <input type="submit" value="SEND" class="submit">
            </form>

或

尝试使用jquery validation

【讨论】：

【解决方案4】：

理想的方法是处理提交事件并在提交事件中运行验证逻辑。有一个占位符来显示验证消息。例如：

第 1 步：为所有 html 元素声明一个 id 并为验证消息声明一个占位符。

    <div>
      <label>Name :</label>
      <input type="text" name="name" id="name" required="required">
    <span id="validationmessage_name" style="color:red;display:none">This field is required.</span>
    </div>
<input type="submit" value="SEND" class="submit" id="submitForm">

第 2 步应该是处理提交事件并在此处运行您的验证逻辑

$("#submitForm").submit(function(e){
  var isValid =true;
if($("#name").val() == '') 
{
    $("#validationmessage_name").show().fadeOut( 5000 );
    isValid=false;
}
//The below code will not submit the form if validation fails.                      
 if(!isValid){
                e.preventDefault();
            }
});

【讨论】：

【解决方案5】：

您需要使用keyup 和focusout 事件来触发和执行实时验证：

$('input').on('keyup focusout', function() {
  $(this).removeClass('error');
  if ($.trim($(this).val()) == '') {
    $(this).addClass('error');
  }
});

input.error {
  border: 1px solid #d00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="#">
  <div><label>Name :</label><input type="text" name="name" required="required"></div>
  <div><label>Phone :</label><input type="number" name="number" required="required"></div>
  <div><label>Email :</label><input type="email" name="email" required="required"></div>
  <div><label>Location :</label><input type="text" name="locaton" required="required"></div>
  <div class="wid100"><label>Requirement :</label><textarea rows="5" required="required"></textarea></div>
  <input type="submit" value="SEND" class="submit">
</form>

【讨论】：