jquery validate

最新推荐文章于 2024-01-26 10:05:23 发布

bird_cat

最新推荐文章于 2024-01-26 10:05:23 发布

阅读量1.3k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

validate forms 验证表单：在你以前从来没有这样验证过；

jquery 让我们更容易的鞋自己的验证插件吗？是的，但是也有一些经常出错需要注意的地方：你需要一个包含有验证方法的标准的类库

你需要在DOM 中适当的显示和隐藏错误信息，你需要做不仅仅是提交表单验证那么简单，也有可能是 keyup 和 blur

你也许需要不同的方式定义验证规则，在不同项目的服务器环境中，这些你不用重新发明额。

有许多验证插件已经存在，不是基于jquery的在jquery能够使用以前，现在有一些基于jquery的方法。

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

jquery导入验证表单插件：

这仅仅是一种定义规则，你也不一定都相应默认的信息，但是他们是非常容易进行一个表单验证。

我们从这个例子中可以看到：

1：当试着提交一个无效的表单时，这第一个无效的元素是被触发，允许使用者改正（correct）这个输入域，如果另外一个无效的输入但不是第一个了，被触发在提交以前，这个输入域也会触发，allowing the user start at the bottom, if he prefers that ？

2：在输入域是被标志为无效之前，

Before a field is marked as invalid, the validation is lazy: Before submitting the form for the first time, the user can tab through fields without getting annoying messages - he won't get bugged before he had the chance to actually enter a correct value

3：一旦一个输入与是被标志为无效，验证错误立刻会显示出，只要使用者输入合适的值，这个错误信息会被移除。

4：If the user enters something in a non-marked field, and tabs/clicks away from it (blur the field), it is validated - obviously the user had the intention to enter something, but failed to enter the correct value 觉得这段是废话，和第三句差不多；

API DOCUMENTATION

贯穿这个文档，有两个重要点，你需要知道他们的意思在验证插件中，是经常的被提到：

1：method：一个验证方法实现了一个验证逻辑要素，像email方法检查一个email的输入值的正确的格式，一系列方法已经提供，你也很容易写这些方法。。。

2：rules ：一个验证规则是一个验证方法的核心要素，像验证输入 email的方法 "required" 和 "email"

下面介绍插件的方法：

plugin methods：

validate(options) Returns: validator 作用：验证选择的表单：

这个方法是下列事件处理的函数： submit ，focus ，keyup ，blur and click 这些在整个表单或单个个体的元素中触发验证，每一个都是有缺陷的，see the onxxx options (onsubmit, onfocusout, onkeyup, onclick) 当提交一个无效的表单的时候，无效的元素都会触发。

使用 debug 选项是容易的建立验证规则，它总是阻止默认的提交，即使当脚本出现错误。

：

bird_cat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery validate

validate forms 验证表单：在你以前从来没有这样验证过； jquery 让我们更容易的鞋自己的验证插件吗？是的，但是也有一些经常出错需要注意的地方：你需要一个包含有验证方法的标准的类库你需要在DOM 中适当的显示和隐藏错误信息，你需要做不仅仅是提交表单验证那么简单，也有可能是 keyup 和 blur你也许需要不同的方式定义验证规则，在不同项目的服务器环
复制链接

扫一扫