jQuery插件Validation表单验证

Bertha 。 2022-06-03 03:06 230阅读 0赞

# 功能 #

1.对”姓名“的必填和长度至少是两位的验证。

2.对“电子邮件”的必填和是否为E-mail格式的验证。

3.对“网址”是否为url的验证。

4.对”你的评论“是否必填验证。

# 结果图 #

![Center][]

# 例子 #

\[html\]  [view plain][]  [copy][view plain]

1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
2.  <html xmlns="http://www.w3.org/1999/xhtml">  
3.  <head>  
4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
5.  <title>快速上手</title>  
6.  <script type="text/javascript" src="../jquery-1.8/jquery-1.8.0.js"></script>  
7.  <script type="text/javascript" src="../jquery.validate.js"></script>  
8.  <style type="text/css">  
9.      \*\{font-family:Verdana; font-size:96%;\}  
10.     label\{width:10em; float:left\}  
11.     label.error\{float:none; color:red; padding-left:.5em; vertical-align:top;\}  
12.     p\{clear:both\}  
13.     .submit\{margin-left:12em;\}  
14.     em\{font-weight:bold; padding-right:lem; vertical-align:top;\}  
15. </style>  
16. <script type="text/javascript">  
17.     $(document).ready(function() \{  
18.         $("\#commentForm").validate();  
19.     \});  
20. </script>  
21. </head>  
22.   
23. <body>  
24.     <form class="cmxform" id="commentForm" method="get" action="\#">  
25.         <fieldset>  
26.             <legend>一个简单的验证带验证提示的评论例子</legend>  
27.             <p>  
28.                 <label for="cusername">姓名</label><em>\*</em>  
29.                 <input id="cusername" name="username" size="25" class="required" minlength="2"/>  
30.             </p>  
31.             <p>  
32.                 <label for="cemail">电子邮件</label><em>\*</em>  
33.                 <input id="cemail" name="email" size="25" class="required email"/>  
34.             </p>  
35.             <p>  
36.                 <label for="curl">网址</label><em> </em>  
37.                 <input id="curl" name="url" size="25" class="url" value=""/>  
38.             </p>  
39.             <p>  
40.                 <label for="ccomment">你的评论</label><em>\*</em>  
41.                 <textarea id="ccomment" name="comment" cols="22" class="required"></textarea>  
42.             </p>  
43.             <p>  
44.                 <input class="submit" type="submit" value="提交"/>  
45.             </p>  
46.         </fieldset>  
47.     </form>  
48. </body>  
49. </html>

# 代码分析 #

1.jQuery代码

\[html\]  [view plain][]  [copy][view plain]

1.  <script type="text/javascript" src="../jquery-1.8/jquery-1.8.0.js"></script>  
2.  <script type="text/javascript" src="../jquery.validate.js"></script>  
3.  <script type="text/javascript">  
4.      $(document).ready(function() \{  
5.          $("\#commentForm").validate();  
6.      \});  
7.  </script>

第1、2行是导入jQuery类库和Validation插件。

第4行的作用是当代码加载完后，执行function中的代码

第5行是确定哪个表单需要被验证。

2.针对不同的字段，进行验证规则编码，设置字段相应属性

class="required" 为必填

class="required email"为必填而且符合为E-mail格式。

class="url" 为url格式验证

minlength="2"为最小长度是2

[Center]: /images/20220603/e31ea275796c43228fce2ad4d834cdbc.png
[view plain]: http://blog.csdn.net/yy228313/article/details/41594623#