Everlasting丶幻的专栏

一个努力学习,发展中的java程序员。。。

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

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

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



阅读更多
上一篇菜鸟学习日记:关于scolltop的问题
下一篇CSS样式命名规则及参考命名标准
想对作者说点什么? 我来说一句

validation-jQuery验证插件

2016年01月13日 3.26MB 下载

validate表单验证

2017年06月13日 13KB 下载

没有更多推荐了,返回首页

关闭
关闭