Question

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

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

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

Answer 1

onchange事件可能就是您所需要的。

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

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

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

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

可用于确定文本的文本仅为字母数字，长度为5到10个字符。在这种情况下，它还允许超量（ - ）。

有关此信息可在网络上的任何位置找到。

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

亲切的问候，

d

Answer 2

我将展示一个示例页面并将其更正为您的页面代码....

<!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/

Answer 3

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);
    });
});

Answer 4

您可能正在寻找的事件是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）。

使用JQUERY验证表单字段

4 个答案: