1

我有一个带有一个输入字段的表单字段。

一旦用户完成输入，我需要进行 ajax 调用并验证服务器端的输入。

我厌倦了 keyup、focusout、keydown 和 mouseup 事件，但似乎没有按预期工作。有人可以建议选择最好的键盘事件来解决这个问题。如果输入为空白，则也应显示错误消息。

4

4 回答 4

0

您可能正在寻找的事件是 blur() 事件，当用户离开输入字段时调用该事件（例如，通过按 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-28T14:07:55.150 回答
0

onchange 事件可能是您需要的。

onchange 监听输入元素的值所做的任何更改，而键事件仅记录在键盘上执行的操作（例如，按下和释放 Esc 也是一个有效的触发器）。

但是我真的没有在这里得到实际的问题。我认为你正在寻找的是一个正则表达式。

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

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

可用于确定文本仅为字母数字且长度在 5 到 10 个字符之间。在这种情况下，它还允许使用连字符 ( - )。

可以在网络上的任何地方找到有关此的信息。

此外，考虑发布您的问题更具描述性并添加您正在使用的代码示例。这可能会激发更多有用的答案。

亲切的问候，

D.

于 2012-05-28T13:47:50.563 回答
0

我将展示一个示例页面并将其正确添加到您的页面代码中......

<!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-28T13:49:00.353 回答
0

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-28T13:49:53.620 回答