菜鸟学习日记: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 表单验证
  • jesonjoke
  • jesonjoke
  • 2016年11月24日 13:32
  • 447

菜鸟shell 脚本学习日记

1、shell 脚本统计当前目录下指定后缀文件行数: 获取当前目录下所有后缀为.txt 文件行数,包含空白行(包括子目录): $find . -name "*.sh" |xargs cat |wc -...
  • cxj415
  • cxj415
  • 2017年11月29日 23:10
  • 53

Jquery验证插件Validation的运用

1.引入jqueryJS文件、validation插件的JS文件 2.Demo jQuery Validate验证 ...
  • RyansChen
  • RyansChen
  • 2016年11月21日 19:48
  • 645

学习总结:jQuery插件——Validation Plugin

本周的任务计划是学习并使用一款jQuery插件,所以在慕课网上找到了这个关于客户端表单验证的插件。插件简介:Validation插件是最常用的插件之一,客户端表单验证是现代网站经常采用的方式,可以减少...
  • lz233333
  • lz233333
  • 2016年09月29日 17:07
  • 399

jQuery Validate 教程

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证...
  • kavensu
  • kavensu
  • 2016年04月13日 15:49
  • 687

jQuery表单验证插件Validation中两种自定义验证信息的方法

方法一:在使用Class属性值的内部添加messages如下:      一个简单的验证带验证提示的评论例子          姓名      * class="{validate:{...
  • qingliuFu
  • qingliuFu
  • 2016年08月30日 20:51
  • 2174

jQuery验证表单插件——jquery-validation

jQuery验证表单插件——jquery-validation The jQuery Validation Plugin provides drop-in validation for your ...
  • q547550831
  • q547550831
  • 2016年09月25日 15:09
  • 879

表单验证插件jQuery.validate 介绍+快速入门案例

由于项目需要,学习了jQuery.validate表单验证插件,这是一款很好用的插件,功能强大又简单,现在把学到的东西记录下来,方便以后回顾。 jQuery.validate简介下边的介绍来自菜鸟教程...
  • Creabine
  • Creabine
  • 2016年04月13日 14:12
  • 1285

菜鸟学习日记: niceScolltop插件的使用

NiceScolltop插件是用于自定义页面滚动条的插件,我们平常见到的浏览器自带的滚动条,丑得跟他妈似得,能不用就不用。很多时候我们都得搞个漂亮的滚动条 这时候就可以考虑使用这个niceScoll...
  • xp_15907659204
  • xp_15907659204
  • 2013年12月09日 16:03
  • 595

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

获取validator对象的方法如下(在之前的表单校验函数中,其实就返回这个对象,所以直接接收这个值即可): //获得validator对象 validator = $("#demoFo...
  • u014520745
  • u014520745
  • 2016年01月31日 00:49
  • 540
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:菜鸟学习日记:Jquery validation插件的使用(一)
举报原因:
原因补充:

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