- 官網:https://github.com/posabsolute/jQuery-Validation-Engine
- 下載解壓後,只需要js及css這兩部份檔案。
- 在表單前加入(確定已經有先引入jquery.js):
<script src="js/languages/jquery.validationEngine-zh_TW.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css">
- 表單必須加入id名稱,例如:
<form id="myform">
- 在欲套用驗證的欄位把參數加入class中,且該欄位必須有設定id,其基本格式如:
<input type="text" name="title" id="title" class="validate[required, minSize[4], maxSize[50]]">
- (1)
equals[field.id]:等於某欄位
- (2)
min[float]:最小值、max[float]:最大值
- (3)
minSize[integer]:最小字數、maxSize[integer]:最大字數
- (4)
minCheckbox[integer]:至少選幾個、maxCheckbox[integer]:最多選幾個
- (5)
custom[格式]:驗證各種輸入內容,格式可以是:
phone(電話)
url(網址)
email(Email)
date(日期 YYYY-MM-DD)
number(數字,如:-143.22 or .77 but also +234,23)
integer(整數,如:-635 +2201 738)
ipv4(IP,如:127.0.0.1)
onlyNumber(僅數字)
onlyNumberSp(僅數字及空白)
onlyLetter(僅字元)
onlyLetterSp(僅字元及空白)
onlyLetterNumber:僅字元和數字,無空白
- 切換位置:http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
- 最後記得加上:
<script>
$(document).ready(function () {
$('#myform').validationEngine();
});
</script>