注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

淘尽网 官方博客

淘尽网http://www.tao3w.com做最好的比价网站

 
 
 

日志

 
 
关于我

淘尽网 http://www.tao3w.com 做最好的比价网站,做最好的数据抓取专家。

网易考拉推荐

jQuery.validate.unobtrusive.js  

2015-01-07 10:51:11|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

引用自http://blog.darkthread.net/post-2011-07-27-unobtrusive-jquery-validation.aspx

Unobtrusive Javascript是一種將Javascript從HTML結構抽離的設計概念(延伸閱讀: kewang, ericsk),避免在HTML標籤中夾雜onchange、onclick Attribute掛載Javascript事件,讓HTML歸HTML、Javascript歸Javascript,功能權責清楚區分,HTML也變得清爽容易閱讀。

ASP.NET MVC 3加入的Unobtrusive jQuery Validation,徹底實踐了Unobtrusive Javascript的精神,透過在<input>加上data-val-*等HTML5相容Attribute註記,不需額外撰寫 Javascript程式就能為欄位加上客戶端驗證邏輯。

手邊的專案一時半刻還無法都轉成ASP.NET MVC3,但又想學習這種Client Validation的優雅寫法,該怎麼辦? 搞懂jquery.validate.unobtrusive.js的原理,只要在HTML中加入適當的Attribute,我們也能實現不沾手的客戶端 驗證寫法。

Brad Wilson有篇詳細的Unobtrusive Client Validation in ASP.NET MVC 3介紹,參考該文章及jquery.validate.unobtrusive.js原始碼,我將手動引用的重點整理如下:

  1. 參照jquery.js、jquery.validate.js、jquery.validate.unobtrusive.js (可透過Microsoft Ajax CDN提供)。
  2. <input>元素加上data-val=”true”,註明要啟用客戶端驗證。data-val-rulename=”驗證失敗訊息"則為<input>加上各式的規則,例如: data-val-required="姓名欄位不可空白"。
  3. 有些驗證規則需要額外參數,則可透過data-val-rulename-parameterName方式指定,例如: data-val-length-max=”60”。
  4. 在<input>後方加上<span data-valmsg-for=”inputName” data-valmsg-replace=”true/false”></span>標註顯示錯誤訊息的位置 。
  5. 如果錯誤訊息要採彙總顯示,則放入一個<div data-valmsg-summary="true"></div>

以下範例一口氣把Unobtrusive jQuery Validation內建支援的檢核規則(未包含creditcard及remote)整理在同一個網頁中,可做為應用時的參考。另外,這套檢核機制底層採用的是頗受歡迎的jQuery Validation Plugin,可視需求輕鬆加入自訂的檢核邏輯,擴充性很好,不用怕被奇怪的專案需求考倒,大家可安心服用。

排版顯示純文字
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Validate Unobtrusive</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js" 
     type="text/javascript"></script>   
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.js" 
     type="text/javascript"></script>   
    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js" 
     type="text/javascript"></script>   
    <style type="text/css">
body,input { font-size: 9pt; }     
.input-validation-error { border: 1px solid #ff0000 }
.input-validation-valid  { border: 1px solid #00ff00 }
.field-validation-error { color: #ff0000 }
.field-validation-valid { display: none }
.validation-summary-errors { font-weight: bold; color: #ff0000 }
.validation-summary-valid { display: none }
    </style>
</head>
<body>
<form id="form1" method="get">
    <div data-valmsg-summary="true"><ul></ul></div>
    <div>
    <input type="text" id="tReq" name="tReq" data-val="true" 
     data-val-required="不可空白"/>
    <span data-valmsg-for="tReq"></span>
    </div>
    <div>
    <input type="text" id="tAccept" name="tAccept" value="a.doc" 
     data-val="true" data-val-accept="檔名須為.jpg、.gif或.png"
     data-val-accept-exts="jpg|gif|png"
     />
    <span data-valmsg-for="tAccept"></span>
    </div>
    <div>
    <input type="text" id="tRegex" name="tRegex" value="123-ABC@"
     data-val="true" data-val-regex="車牌格式須為999-999"
     data-val-regex-pattern="[0-9A-Z]{3}-[0-9A-Z]{3}"
     />
    <span data-valmsg-for="tRegex"></span>
    </div>
    <div>
    <input type="text" id="tDigit" name="tDigit" value="-1234"
     data-val="true" data-val-digits="只接受數字字元"/>
    <span data-valmsg-for="tDigit"></span>
    </div>
    <div>
    <input type="text" id="tNum" name="tNum" value="-1,234.56A"
     data-val="true" data-val-number="必須為有效數字"/>
    <span data-valmsg-for="tNum"></span>
    </div>
    <div>
    <input type="text" id="tDate" name="tDate" value="X/01/X2000"
     data-val="true" data-val-date="必須為日期(僅粗略檢查)"/>
    <span data-valmsg-for="tDate"></span>
    </div>
    <div>
    <input type="text" id="tEmail" name="tEmail" value="jeffrey @mail.com"
     data-val="true" data-val-email="必須為Email"/>
    <span data-valmsg-for="tEmail"></span>
    </div>
    <div>
    <input type="text" id="tUrl" name="tUrl" value="http:// blog.darkthread.net"
     data-val="true" data-val-url="必須為有效網址"/>
    <span data-valmsg-for="tUrl"></span>
    </div>
    <div>
    <input type="text" id="tLen" name="tLen" value="TTT"
     data-val="true" data-val-length="長度須介於4到8之間"
     data-val-length-min="4" data-val-length-max="8"
     />
    <span data-valmsg-for="tLen"></span>
    </div>
    <div>
    <input type="text" id="tRange" name="tRange" value="5"
     data-val="true" data-val-range="須介於10到100" 
     data-val-range-min="10" data-val-range-max="100"
     />
    <span data-valmsg-for="tRange"></span>
    </div>
    <div>
    <input type="text" id="tEq" name="tEq" value="99"
     data-val="true" data-val-equalto="必須與上方欄位內容相同"
     data-val-equalto-other="tRange"
     />
    <span data-valmsg-for="tEq"></span>
    </div>
    <div>
    <input type="submit" id="send" value="Send" />
</form>
</body>
</html>

PS: Unobtrusive jQuery Validation一樣可以搭配先前介紹過的"內嵌式錯誤訊息顯示"。

  评论这张
 
阅读(589)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017