使用JQUERY验证表格字段

我有一个带有一个输入字段的表单字段。使用JQUERY验证表格字段

只要用户完成打字，我需要在服务器端进行ajax调用和验证输入。

我累KEYUP，事件的内容，KEYDOWN和MouseUp事件，但似乎并不如预期的工作。有人可能会建议您选择解决此问题的最佳键盘事件。如果输入为空白，则应显示错误消息。

来源

2012-05-28 Nil Pun

你能告诉我们你的脚本吗 – mgraph

我建议使用尝试客户端验证。 –

你为什么不在页面本身上使用jquery验证http://speckyboy.com/2009/12/17/10-useful-jquery-form-validation-techniques-and-tutorials-2/ –

你可能寻找的事件是模糊（）事件，该事件被称为当用户离开输入框（按Tab键，或者点击例如下一个输入）

例如：

$(document).ready(function(){ 
     $('input#myInput').blur(function(){ 
      myValidator($(this), $(this).val()); 
     }); 
    }); 

    function myValidator($element, value) 
    { 
     // Example regex to sucessfully match a value of at least 4 digits 
     if (!value.match(/^[0-9]{4,}$/) 
     { 
      // In this case I'm adding an error class to the input, 
      // but feel free to do anything you like 
      $element.addClass('error'); 
     } 
    }

编辑：

经由AJAX验证是非常不好的实践中，如一个可以很容易地停止HTTP请求或禁用JavaScript的整个（我亲自尝试避免不必要的http请求）。

我建议您首先检查客户端（JavaScript/jQuery的只），并提交仔细检查服务器端时（使用PHP/ASP）。

来源

2012-05-28 14:07:55

onchange事件可能是你需要的。

平变化侦听在输入元素的值作出的任何改变，而键事件仅登记在键盘上执行的动作（按下并释放Esc键也是例如一个有效的触发）。

但是我真的不明白这里的实际问题。我认为你要找的是正则表达式。

正则表达式是可用于检查数据是否满足给定条件的模式。例如：

'/[a-zA-Z0-9\-]{5, 10}/'

其中可能用于确定文本的字母仅为字母数字，长度在5到10个字符之间。在这种情况下，它也允许超级（ - ）。

有关这方面的信息可能在网络上的任何地方找到。

此外，认为aboout发布你质疑多一点的描述，并添加您使用的代码示例。这可能会激发更多有用的答案。

亲切的问候，

来源

2012-05-28 13:47:50 Digitalis

我将展示一个例子页面并使其纠正到您的网页代码....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script> 
<style type="text/css"> 
* { font-family: Verdana; font-size: 96%; } 
label { width: 10em; float: left; } 
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; } 
p { clear: both; } 
.submit { margin-left: 12em; } 
em { font-weight: bold; padding-right: 1em; vertical-align: top; } 
</style> 
    <script> 
    $(document).ready(function(){ 
    $("#commentForm").validate(); 
    }); 
    </script> 

</head> 
<body> 


<form class="cmxform" id="commentForm" method="get" action=""> 
<fieldset> 
    <legend>A simple comment form with submit validation and default messages</legend> 
    <p> 
    <label for="cname">Name</label> 
    <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" /> 
    </p> 
    <p> 
    <label for="cemail">E-Mail</label> 
    <em>*</em><input id="cemail" name="email" size="25" class="required email" /> 
    </p> 
    <p> 
    <label for="curl">URL</label> 
    <em> </em><input id="curl" name="url" size="25" class="url" value="" /> 
    </p> 
    <p> 
    <label for="ccomment">Your comment</label> 
    <em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea> 
    </p> 
    <p> 
    <input class="submit" type="submit" value="Submit"/> 
    </p> 
</fieldset> 
</form> 
</body> 
</html>

，或者你可以采取更多的从概念在这里：http://speckyboy.com/2009/12/17/10-useful-jquery-form-validation-techniques-and-tutorials-2/

来源

2012-05-28 13:49:00

http://jsfiddle.net/landau/zKrYS/

我不太确定什么“不按预期的方式工作”，但这里是一个例子。

$("form").on("submit", function(e) { 
    e.preventDefault(); 
    var val = $("input").val().trim(); 
    if (!val) { 
     alert("please fill in the field"); 
     return; 
    } 
    var jqxhr = $.ajax({ 
     url: "/echo/json/", 
     data: { 
      value: val 
     }, 
     type: "post" 
    }).done(function(data, status, xhr) { 
     console.log(data, status, xhr); 
    }); 
});

来源

2012-05-28 13:49:53 Trevor

使用JQUERY验证表格字段

回答

相关问题