js 檔取出來做測試
jquery.validate 加上 validate.unobtrusive 基本上就是達成以 unobtrusive 的方
式對頁面上的欄位進行驗證。
因為是以 unobtrusive 進行，所以如何去設定欄位如何去驗證這件事情，就由原本放在
onclick 或 blur 之類的事件中，去指定並取得欄位值的方式，轉而改用設定屬性指定
要是否要驗證及驗證方式。
在使用上，有分幾個方向 (本篇是第一種)
第一種就是只對單一欄位，以內建預設的基本檢核，比方說欄位不可為空，Email 格
式是否正確這種。
第二種稍微複雜一點，需要再另行決定一些「資訊」比方說，檢查欄位的值是否在某個
區間中，這個區間就是必須要自行決定的範圍，或是需要透過正則表達式檢查欄位。
第三種是透過 Ajax 呼叫後端進行檢查
第四種則是自定驗證。
基本的使用
<html>
<head>
<script src="Scripts\jquery-1.10.2.js"></script>
<script src="Scripts\jquery.validate.js"></script>
<script src="Scripts\jquery.validate.unobtrusive.js"></script>
</head>
<body>
<form id="form1" method="get">
<!-- 透過設定 data-val="true" 表示要進行驗證該 tag -->
<!-- 透過設定 data-val-required="欄位不可為空" 表示要以該欄位不可為空的條件驗證該欄位，並當檢核失敗時顯示錯誤訊息「欄位不可為空！」 -->
<input type="text" name="username" id="username" data-val="true" data-val-required="欄位不可為空！" />
<!-- 下面的 tag 會顯示 name 屬性為 username 的 tag 進行驗證時所產生的錯誤訊息 -->
<!-- data-valmsg-for 是對應到受驗證欄位的 name -->
<!-- data-valmsg-replace 為必要 (有試過有些版本的驗證不用) -->
<span data-valmsg-for="username" data-valmsg-replace="true"></span>
<!-- 下面的 tag 會將頁面上驗證的錯誤訊息都集中在這 -->
<div class="validation-summary-valid" data-valmsg-summary="true">
<ul>
<li style="display: none"></li>
</ul>
</div>
<input type="submit" id="send" value="Send" />
</form>
</body>
</html>
<!-- data-val-required="欄位不能为空！" --> <input type="text" name="uid" id="uid" data-val="true" data-val-required="欄位不能为空！" /> <span data-valmsg-for="uid" data-valmsg-replace="true"></span>
檢查 Email 格式
<!-- data-val-email="Email不正確" -->
<input type="text" name="email" id="email" data-val="true"
data-val-required="Email 不能為空" data-val-email="Email不正確" />
<span data-valmsg-for="email" data-valmsg-replace="true"></span>
檢查 url 格式
<!-- data-val-url="網址錯誤" -->
<input type="text" name="url" id="url" data-val="true"
data-val-url="網址錯誤">
<span data-valmsg-for="url" data-valmsg-replace="true"></span>
日期驗證有一套規則，我是覺的不太好用，或許用自定驗證來處理會比較恰當
<!-- data-val-date="日期錯誤" -->
<input type="text" name="ndate" id="ndate" data-val="true" value=""
data-val-date="日期錯誤">
<span data-valmsg-for="ndate" data-valmsg-replace="true"></span>
正整數
<!-- data-val-digits="必須輸入正整數" -->
<input type="text" name="digits" id="digits" data-val="true"
data-val-digits="必須輸入正整數">
<span data-valmsg-for="digits" data-valmsg-replace="true"></span>
檢查所輸入的是否為數字，小數可以、負數可以、整數可以
<!-- data-val-number="必須為有效數字" -->
<input type="text" name="number" id="number" data-val="true"
data-val-number="必須為有效數字">
<span data-valmsg-for="number" data-valmsg-replace="true"></span>
比對兩個欄位的內容是否一致
<!-- data-val-equalto 指定欄位不一致時的錯誤訊息 -->
<!-- data-val-equalto-other 要比對的另一個欄位的 name 屬性 -->
<body>
<form id="form1" method="get">
<input type="password" name="pwd" id="pwd" data-val="true" />
<input type="password" name="pwd2" id="pwd2" data-val="true"
data-val-equalto="兩次輸入的密碼不一致。" data-val-equalto-other="pwd"
/>
<span data-valmsg-for="pwd2" data-valmsg-replace="true"></span>
<input type="submit" id="send" value="Send" />
</form>
</body>
檢查欄位內容的長度
在 data-val-length-max 和 data-val-length-min 間輸入欄位長度的上下限，如果沒有這
個屬性，就表示長度沒有上/下限，data-val-length 則是表示這個欄位需要檢查長度，
並且設定當欄位長度錯誤時要回應什麼錯誤訊息。
<!-- data-val-length-max="10" data-val-length-min="6" -->
<!-- data-val-length="欄位長度需要在 6 ~ 10 個字元間" -->
<body>
<form id="form1" method="get">
<input type="text" name="columnLength" id="columnLength" data-val="true"
data-val-length-max="10" data-val-length-min="6"
data-val-length="欄位長度需要在 6 ~ 10 個字元間" />
<span data-valmsg-for="columnLength" data-valmsg-replace="true"></span>
<input type="submit" id="send" value="Send" />
</form>
</body>
沒有留言:
張貼留言