第8款插件:jQuery Form Validator表单检查插件,超简单！validator-0.3.3

描述：使用该插件可指定的条件检查表单的输入项目，错误提示信息框经过设计，提供给用户一个新颖美观的表彰输入检查功能。
兼容浏览器：IE6,IE7,IE8,IE9,Firefox,Google Chrome
官方链接： http://validator.codeplex.com
JS下载：http://ijquery.360sites.cn/js/jquery.validator-0.3.3.min.js
预览：http://ijquery.360sites.cn/demo/validator
打包下载：http://iquery.360sites.cn/demo/validator/validator.zip
参数说明：

1. 0.33版以后，不用编写任何的javascript代码，只需要在最后的submit按钮中加上οnclick="return validate('form');"即可！

复制代码

图片展示：

JS引用代码：

1. <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery-1.4.2.min.js"></script>
   
2. <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery.validator-0.3.3.min.js"></script>

复制代码

HTML代码：

1. <form>
   
2.         <dl>
   
3.                 <dt>姓名<span class="require">必须</span></dt>
   
4.                 <dd><input type="text" name="name" id="name" value="" size="30" maxlength="256" validate="form" require="<p>请输入姓名。</p>" />
   
5.                 <p class="caption">例）王 老汉</p></dd>
   
6.                 
   
7.                 <dt>电子邮件<span class="require">必须</span></dt>
   
8.                 <dd><input type="text" name="email" id="email" value="" size="30" maxlength="256" validate="form" require="<p>请输入电子邮件地址。</p>" regular="<p>请检查输入的邮件地址的形式。</p><p>例）example@address.com</p>" validExpress="[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?" />
   
9.                 <p class="caption">例）example@address.com</p></dd>
   
10.                 
    
11.                 <dt>密码<span class="require">必须</span></dt>
    
12.                 <dd><input type="password" name="password" id="password" value="" size="30" maxlength="256" validate="form" require="<p>请输入密码。</p>" custom="<p>密码必须6个字符或者6个字符以上。</p>" customFn="return this.value.length >= 6;" /></dd>
    
13.                 
    
14.                 <dt>密码确认<span class="require">必须</span></dt>
    
15.                 <dd><input type="password" value="" size="30" maxlength="256" validate="form" require="<p>请输入密码确认。</p>" compare="<p>输入的密码不一致。</p>" compareTo="newpassword" /></dd>
    
16.                 
    
17.                 <dt>性別<span class="require">必须</span></dt>
    
18.                 <dd>
    
19.                         <span validate="form" require="<p>请选择性别。</p>">
    
20.                                 <input type="radio" name="gender">男性</input>
    
21.                                 <input type="radio" name="gender">女性</input>
    
22.                         </span>
    
23.                 </dd>
    
24.         </dl>
    
25.         <div id="submitform">
    
26.                 <input type="submit" name="submitbtm" id="submitbtm" value="提交" οnclick="return validate('form');"/>
    
27.         </div>
    
28. </form>

复制代码

CSS代码：

1. <link rel="stylesheet" type="text/css" href="css/validator.css" media="all" />

复制代码

validator.css代码如下 ：

1. .highlight
   
2. {
   
3.     background-image: none !important;
   
4.     background-color: #fffacd !important;
   
5.         color: Black;
   
6. }
   
7. 
   
8. .alertbox
   
9. {
   
10.     position: absolute;
    
11.     padding-left: 45px;
    
12.     width: 216;
    
13.     background: url(aarow.png) no-repeat left top;
    
14.     color: Black;
    
15. }
    
16. 
    
17. .alertbox div
    
18. {
    
19.     min-height: 34px;
    
20.     width: 200px;
    
21.     padding: 8px;
    
22.     border-radius: 10px;
    
23.     -moz-border-radius: 10px;
    
24.     -webkit-border-radius: 10px;
    
25.     background-color: #FFEB8C;
    
26. }

复制代码

[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=8