eg-validationeg 表單數(shù)據(jù)校驗
eg表單數(shù)據(jù)校驗，簡單快速實現(xiàn)表單數(shù)據(jù)校驗，擴展性強
簡單入門
<!DOCTYPE html>
<html>
<head>
<title>Validation Form Template</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-1.11.3.min.js"></script>
<script src="eg-validation.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class='well'>
<form class="form-horizontal" id="form" action="###">
<div >QQ:<input type="text" id="email" eg-valid="true" name="email" eg-tips="請輸入QQ號" eg-qq eg-success="校驗通過" > </div>
<div >郵箱<input type="text" eg-valid eg-email="正確的郵箱" eg-tips="請輸入郵箱" eg-required eg-position="bottom"></div>
<button type="submit" class="btn">登錄</button>
</form>
</div>
<script type="text/javascript" charset="utf-8">
$(function () {
$('#form').validation();
})
</script>
</body>
</html>
以下為字段基本屬性的解釋
1. eg-valid 是否開啟校驗 默認值：true
2. eg-tips 空文本域獲取焦點后的提示消息
3. eg-position 校驗結(jié)果展示位置 top、right、bottom、left 默認值：right
4. eg-inline 文本域所有的校驗結(jié)果指定節(jié)點展示
5. eg-{校驗規(guī)則名} 開啟對應(yīng)的校驗規(guī)則， 值為校驗提示文本
6. eg-{校驗規(guī)則名}-param 校驗規(guī)則對應(yīng)的附加參數(shù)，非必須，根據(jù)校驗規(guī)則參數(shù)而定，多個用","(逗號)隔開
7. eg-{校驗規(guī)則名}-inline 文本域指定的校驗規(guī)則校驗結(jié)果指定節(jié)點展示
8. eg-success 文本域校驗通過后的提示信息 默認值： 校驗通過
以下幾種默認的校驗規(guī)則
1. required 必須輸入的字段
2. number 必須輸入合法的數(shù)字（負數(shù)，小數(shù)）
3. digits 必須輸入整數(shù)
4. decimal 必須輸入貨幣
5. date 必須輸入正確格式的日期。日期校驗 ie6 出錯，慎用
6. url 必須輸入正確格式的網(wǎng)址
7. email 必須輸入正確格式的電子郵件
8. char 必須輸入英文字符
9. qq 必須輸入正確QQ
10. phone 必須輸入正確手機號碼
11. equalto 必須輸入兩次一至的字符，匹配文本域的唯一標識 ： eg-equalto-param=#password
12. chinese 必須輸入輸入漢字
13. minlength 必須輸入至少3位，eg-minlength-param=3
14. maxlength 必須輸入至多6位，eg-minlength-param=6
15. length 必須輸入長度必須介于 {3} 和 {6} 之間的字符串（漢字算一個字符）， eg-length-param=3,6
16. min 輸入值不能小于3， eg-min-param=3
17. max 輸入值不能大于6， eg-min-param=6
18. pattern 輸入匹配對應(yīng)的正則表達式， eg-pattern-param=/^\d+$/
以下講解該校驗組件可使用的幾個選項的屬性(構(gòu)造時傳入的參數(shù))
1. rules 對象，校驗規(guī)則集 2. isSubmit 布爾型，校驗通過后是否進行表單提交， 默認：true 進行表單提交 3. valiAfter 方法，所有表單域校驗完成后回調(diào)方法 4. valiSuccess 方法，所有表單域校驗完成并通過后回調(diào)方法
下面對rules規(guī)則集的屬性講解
簡單案例
<!DOCTYPE html>
<html>
<head>
<title>Validation add rules Template</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-1.11.3.min.js"></script>
<script src="eg-validation.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="form">
<div >zip:<input type="text" eg-valid="true" eg-zip eg-success="校驗通過"> </div>
</div>
<script type="text/javascript" charset="utf-8">
$(function () {
//這里增加郵編進行校驗
$('#form').validation({
rules :{'zip':{validate: function(value) {return (/^[1-9][0-9]{5}$/.test(value) || /^.{4,15}$/.test(value));}, defaultMsg: '請輸入正確郵編'}}
});
})
</script>
</body>
</html>
以下對eg-inline的使用案例
<!DOCTYPE html>
<html>
<head>
<title>Validation inline Form Template</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-1.11.3.min.js"></script>
<script src="eg-validation.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="form">
<div >email1:<input type="text" eg-valid="true" eg-email="" eg-required eg-success="校驗通過" eg-inline="#eg-inline"> </div>
<div >email2:<input type="text" eg-valid="true" eg-email eg-required eg-email-inline="#eg-email-inline"> </div>
</div>
<br/>
email1 所有校驗提示在此展示：<div id="eg-inline"></div>
<br/>
email2 郵箱校驗提示在此展示：<div id="eg-email-inline"></div>
<br/>
<script type="text/javascript" charset="utf-8">
$(function () {
//這里增加郵編進行校驗
$('#form').validation({
isSubmit: false
});
})
</script>
</body>
</html>評論
圖片
表情