0

我有很多书向我展示了如何使用 jQuery 插件进行验证，但是我正在从事的项目需要一些非正统的方法。

在下面的示例代码中：我为每个错误消息持有者添加了一个 ID，因为我想单独调用每条消息。如果特定项目发生错误，我需要通过删除标签并在离开事件（如果可能）上调用标签来隐藏整个消息。

我写了这段 jQuery 作为一个例子： 所以我不需要使用验证插件来生成错误消息，我需要做的就是 show show the message on leave event。

出于说明目的：

<script type="text/javascript">
$(document).ready(function(){
  $('#signup').validate({
    rules: {
      txtUserName: {
        required: true,
        txtUserName: true
      }
    }, 
    messages: {
      txtUserName: {
        required: "Please supply your e-mail address.",
        txtUserName: "This is not a valid e-mail address."
      }
    } 
  });
});
</script>

这是一个基本的示例表单：

<form action="/" method="post" id="signup">
  <ul>
    <li>
      <p id="flgUserName">Hide on page load but show on error</p>
      <input name="txtUserName" id="txtUserName" type="text" class="required">
      <label for="txtUserName">Username:</label>
    </li>

    <li>
      <p id="flgEmail">Hide on page load but show on error</p>
      <input name="txtEmail" id="txtEmail" type="text" class="required">
      <label for="txtEmail">E-mail:</label>
    </li>

    <li>
      <input type="submit" name="submit" value="Submit">
    </li>
  </ul>
</form>
4

1 回答 1

0

您可以使用 jquery.blur()来确定表单输入元素何时失去焦点。

从那里，您可以通过 . 检查表单输入元素是否有效formInputElement.validity.valid == true。这仅在您将 html5 的required属性添加到每个表单输入元素时才有效。

您的代码可能如下所示的示例：

$('form input').blur(function() {
    if(!this.validity.valid) {
        $(this).prev().show();
    } else {
        $(this).prev().hide();
    }
});

此外，您可能希望更改type输入元素的属性，以便正确验证它们。这里有一个新类型的输入元素列表：

http://www.w3schools.com/html/html5_form_input_types.asp

于 2013-06-14T07:20:35.140 回答