欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery插件Validation快速完成表單驗證的方式

 更新時間：2016年07月28日 09:57:56   作者：Marksinoberg  
這篇文章主要為大家詳細(xì)介紹了jQuery插件Validation快速完成表單驗證的方式，感興趣的小伙伴們可以參考一下

JQuery的Validation插件可以到http://plugins.jquery.com/上去下載。今天來分享一下，關(guān)于這個插件的使用。

簡易使用

這第一種方式可謂是傻瓜式的使用，我們只需要按照validation定義好的規(guī)則就可以了。
 •首先引入JQuery庫和Validation插件： 
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
 •然后是打開驗證開關(guān)： 

$(function(){
 $("#form_id").validate();
});
// 或者
$(document).ready(function(){
 $("#form_id").validate();
});

 •validation的build_in驗證規(guī)則有：
◦class = “required”: 表明表單中該字段為必選的
 ◦class = "required email" 表明在表單中該字段為必須存在的，而且是符合email的規(guī)范格式
 ◦class = "url"表明在表單中該字段需要滿足url的匹配模式
 ◦minlength = "6" 表明在表單中該字段的長度最小為6位

 案例展示：

 <!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Validation for form demo</title>
 <script type="text/javascript" src="jquery-2.2.4.min.js"></script>
 <script type="text/javascript" src="jquery.validate.min.js"></script>
 <style>
 em {
  font-weight: bold;
  vertical-align: top;
  color: red;
  float: right;
 }

 label {
  width:10em;
  padding: 7px;
 }
 .container {
  width: 370px;
  height: auto;
  background-color: silver;
 }
 </style>
</head>
<body>
 <div align="center" class="container">
 <form id="vform" method="post" action="#">
  <fieldset>
  <legend>使用JQuery插件validation來實現(xiàn)表單驗證</legend>
  <p>
   <label for="username">姓名：</label>
   <input id="username" name="username" class="required" minlength="2"> <em>*</em>

  </p>
  <p>
   <label for="email">郵件：</label>
   <input id="email" name="email" class="required email" > <em>*</em>
  </p>
  <p>
   <label for="url">網(wǎng)址：</label>
   <input id="url" name="url" class="url" ></p>
  <p>
   <label for="comment">評論：</label>
   <textarea id="comment" name="comment" class="required"></textarea>
   <em>*</em>
  </p>
  <p><input type="submit" name="submit"></p>
  </fieldset>
 </form>
 </div>

<script>
 // $(function(){
 // $("#vform").validation();
 // });
 $(document).ready(function(){
 $("#vform").validate();
 });

</script>
</body>
</html>

驗證規(guī)則全寫到Class中

和簡易使用不同的是，這種方式使用pure的class來進(jìn)行控制。但是我們需要引入一個新的插件jquery.metadate.js。實現(xiàn)的功能就是幫助用戶將所有的與驗證數(shù)據(jù)相關(guān)的信息寫到class屬性中，方便管理。

我們可以通過以下幾步來實現(xiàn)這一需求。
 •引入一個新的插件jquery.metadata.js 
<script src="jquery.metadata.js"></script>
 •改變調(diào)用驗證表單的開關(guān)： 

$(function(){
 $("#form_id").validate();//去掉這行代碼，修改成下面的
 $("#form_id").validate({meta:"validate"});
});

 •將驗證信息寫到class屬性中。詳見下面的代碼。

 <div align="center" class="container">
 <form id="vform" method="post" action="#">
  <fieldset>
  <legend>使用JQuery插件validation來實現(xiàn)表單驗證</legend>
  <p>
   <label for="username">姓名：</label>
   <input id="username" name="username" class="{validate: { required : true, minlength : 2 }}" > <em>*</em>

  </p>
  <p>
   <label for="email">郵件：</label>
   <input id="email" name="email" class="{validate: { required :true,email :true}}" > <em>*</em>
  </p>
  <p>
   <label for="url">網(wǎng)址：</label>
   <input id="url" name="url" class="{validate: {url :true}}" ></p>
  <p>
   <label for="comment">評論：</label>
   <textarea id="comment" name="comment" class="{validate: {required :true}}"></textarea>
   <em>*</em>
  </p>
  <p><input type="submit" name="submit"></p>
  </fieldset>
 </form>
 </div>

注意： Validate寫在class屬性的時候，記得要將驗證規(guī)則使用空格分隔開來。 否則代碼不會正常的運(yùn)行！

還有就是$("#vform").validate({meta:"validate"});中validate這個單詞不能隨意的更改，否則也是不會生效的。 

通過name屬性構(gòu)建驗證規(guī)則

下面介紹一種與HTML元素的屬性無直接關(guān)聯(lián)，而是通過name屬性來關(guān)聯(lián)字段和驗證規(guī)則的驗證寫法。

優(yōu)點： 可以實現(xiàn)行為與結(jié)構(gòu)的分離，便與調(diào)試和維護(hù)代碼；
 •表單代碼，去除所有的class驗證。當(dāng)然這并不是說我們不可以給字段添加樣式咯。 

<div align="center" class="container">
 <form id="vform" method="post" action="#">
  <fieldset>
  <legend>使用JQuery插件validation來實現(xiàn)表單驗證</legend>
  <p>
   <label for="username">姓名：</label>
   <input id="username" name="username" > <em>*</em>

  </p>
  <p>
   <label for="email">郵件：</label>
   <input id="email" name="email" > <em>*</em>
  </p>
  <p>
   <label for="url">網(wǎng)址：</label>
   <input id="url" name="url" ></p>
  <p>
   <label for="comment">評論：</label>
   <textarea id="comment" name="comment" ></textarea>
   <em>*</em>
  </p>
  <p><input type="submit" name="submit"></p>
  </fieldset>
 </form>
 </div>

 •JQuery代碼如下： 

<script>
 // $(function(){
 // $("#vform").validation();
 // });

 $(function(){
 $("#vform").validate({
  rules:{
  username: {
   required: true,
   minlength: 6
  },
  email: {
   required: true,
   email: true
  },
  url: "url",
  comment: "required"
  }
 });
 });

</script>

 •注意：使用空格分隔驗證字段 

以上就是關(guān)于JQuery插件Validation的基礎(chǔ)使用了。

國際化之中文化
 •首先引入一個中文的信息驗證庫，這個我們可以在下載好的validation的lib包下找到。 
<script src="messages_zh.js"></script>
 •第二步就是在驗證規(guī)則處添加message字段，然后輸入自定義的中文信息。如下：

 <script>
 // $(function(){
 // $("#vform").validation();
 // });

 $(function(){
 $("#vform").validate({
  rules:{
  username: {
   required: true,
   minlength: 6,
   messages: {
   required: '請輸入姓名',
   minlength: '請至少輸入6個字符'
   }
  },
  email: {
   required: true,
   email: true,
   messages: {
   required: '請輸入郵箱',
   email: '請檢查您的郵箱格式！'
   }
  },
  url: {
   url: true,
   messages: {
   url: '請檢查網(wǎng)址的格式！'
   }
  },
  comment: {
   required: true,
   messages: {
   required: '請輸入評論！',
   }
  }
  }
 });
 });

</script>

不知道怎么回事，我這段代碼沒有顯示中文提示，大家發(fā)現(xiàn)了錯誤在哪里了嗎？

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論