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

原创 2013年12月03日 15:10:51

首先,到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插件的应用例子便完成了。

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



相关文章推荐

使用jQuery Validation Engine 表单验证(菜鸟经历分享)

jQuery Validation Engine 表单验证

jquery 表单验证插件validation(国际化)的使用

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">               $(function() {          ...

jQuery学习之:Validation表单验证插件

转自: http://www.cnblogs.com/FireRivers/archive/2010/08/20/1804847.html   最近由于公司决定使用AJAX + Struts2...

jQuery插件——Validation的使用

插件(plugin)也成为扩展(Extension),是一种遵循一定规范的应用程序接口编写出来的程序。 最新最全的插件可以从Jquery官方网站的插件板块中获取,网站网址为http://plugins...

Validation-jQuery表单验证插件使用方法

作用 jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持。 使用前的...

jquery-validation.js验证插件使用详解

jquery-validation 使用      一、用前必备   官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-valida...
  • cqkxzyi
  • cqkxzyi
  • 2014年07月09日 11:07
  • 1242

使用jQuery的validation插件来完成表单的验证

**使用jQuery的validation插件来完成表单的验证** validation 练习

Jquery validate 表单验证插件的使用(转自菜鸟)

一、导入js库 /validate/jquery-1.6.2.min.js"> /validate/jquery.validate.min.js"> 注:返回web项目的根路径。 二、默...

jQuery插件jQuery Validation学习(三)——validator对象

获取validator对象的方法如下(在之前的表单校验函数中,其实就返回这个对象,所以直接接收这个值即可): //获得validator对象 validator = $("#demoFo...

jQuery Validation插件

  • 2016年01月10日 11:05
  • 278KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:菜鸟学习日记:Jquery validation插件的使用(一)
举报原因:
原因补充:

(最多只允许输入30个字)