如何使用jQuery进行数据验证？
[英]how to do data validation using 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为此进行数据验证
5 个解决方案
解决方案1
1 2017-07-24 05:41:47
我建议您将事件更改为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
0 2017-07-24 05:40:17
您可以尝试在模糊事件中检查每个输入字段，例如，当元素的焦点丢失时，并显示错误消息
- 向每个输入添加一个ID或一个类
- 为每个id（或类）在document.ready事件上添加事件处理程序
解决方案3
0 2017-07-24 05:53:12
尝试这个，
$(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验证
解决方案4
0 2017-07-24 06:21:47
理想的方法可能是处理Submit事件并在Submit事件中运行验证逻辑。 有一个占位符以显示验证消息。 例如：
第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应该正在处理Submit事件并在此处运行验证逻辑
$("#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
0 2017-07-24 06:22:41
您需要使用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>
如何使用jquery validate完全禁用“eager”验证？
[英]How do I disable “eager” validation entirely using jquery validate?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.