0 
<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 对此进行数据验证

4

5 回答 5

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>

于 2017-07-24T05:41:47.643 回答
0

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

  1. 为每个输入添加一个 id 或一个类
  2. 为每个 id（或类）的 document.ready 事件添加一个事件处理程序
于 2017-07-24T05:40:17.573 回答
0

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

第 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();
            }
});
于 2017-07-24T06:21:47.467 回答
0

您需要使用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>

于 2017-07-24T06:22:41.700 回答
0

尝试这个，

    $(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 验证

于 2017-07-24T05:53:12.800 回答