如何使用jquery做數據驗證？

<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做數據驗證？

來源

2017-07-24 vaishu

你可以嘗試檢查每個輸入字段上的模糊事件，當焦點元素丟失，並顯示一條錯誤消息，比如做數據驗證此

添加到每個輸入ID或類
添加上的document.ready事件的事件處理程序，每個ID（或類）

來源

2017-07-24 05:40:17 YCotov

我建議ÿ ou將您的活動更改爲onblur，而不是鍵入。反正你的要求。這將是下面的東西。

試試看看這個代碼。

$(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-24 05:41:47 adi

試試這個，

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

來源

2017-07-24 05:53:12

理想的方式可能是處理提交事件並在提交事件中運行驗證邏輯。讓一個佔位符顯示驗證消息。例如：

步驟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">

第二步應該處理提交事件，並在這裏運行驗證邏輯

$("#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-24 06:21:47 Pramod

您需要使用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-24 06:22:41

如何使用jquery做數據驗證？

回答

相關問題