关闭

菜鸟学习日记:Jquery validation插件的使用(一)

354人阅读 评论(0) 收藏 举报

首先,到Jquery官网下载Jquery validation插件。

接着我们便开始了。

1、新建一个空html页面

2、引入Jquery库和Validation插件

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>

3、新建一个需要进行验证的表单

<form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>一个简单的验证带验证提示的评论例子</legend>
   <p>
     <label for="cusername">姓名</label>
     <em>*</em><input id="cusername" name="username" size="25"  />
   </p>
   <p>
     <label for="cemail">电子邮件</label>
     <em>*</em><input id="cemail" name="email" size="25"  />
   </p>
   <p>
     <label for="curl">网址</label>
     <em>  </em><input id="curl" name="url" size="25"  value="" />
   </p>
   <p>
     <label for="ccomment">你的评论</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22"  ></textarea>
   </p>
   <p>
     <input class="submit" type="submit" value="提交"/>
   </p>
 </fieldset>
 </form>

4、给表单添加样式

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

5、编写Jquery代码,触发validation插件,确定要验证的表单

  <script type="text/javascript">
  	$(function(){
		$('#commentForm').validate();
	});
  </script>

6、根据要验证的字段的不同,设置不同的验证规则,设置字段相应的属性。设置完的表单代码如下

 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>一个简单的验证带验证提示的评论例子</legend>
   <p>
     <label for="cusername">姓名</label>
     <em>*</em><input id="cusername" name="username" size="25" class="required" minlength="2" />
   </p>
   <p>
     <label for="cemail">电子邮件</label>
     <em>*</em><input id="cemail" name="email" size="25"  class="required email" />
   </p>
   <p>
     <label for="curl">网址</label>
     <em>  </em><input id="curl" name="url" size="25"  class="url" value="" />
   </p>
   <p>
     <label for="ccomment">你的评论</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
   </p>
   <p>
     <input class="submit" type="submit" value="提交"/>
   </p>
 </fieldset>
 </form>

第一个简单的validation插件的应用例子便完成了。

试了下效果,发现简单的应用都能达到挺好的验证效果了,这插件真的挺好。下次继续学习。



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:19825次
    • 积分:371
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:22篇
    • 译文:0篇
    • 评论:0条
    文章分类