parsley之驗證屬性設置
阿新 • • 發佈：2017-08-26
無法 view osi 輸入框 中一 trigger date() lan device
parsley.js添加表單驗證功能，直接在html元素中添加對應屬性；
| Name | API | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Required #2.0 必填 |
|
驗證元素是否必填。如果設置 data-parsley-required="false",，屬性失效，元素將不再必填； |
||||||||
| Email #2.0 |
|
驗證元素的值必須是一個郵箱地址； | ||||||||
| Number #2.0 數值 |
data-parsley-type="number" |
依據給定的步長、初始值、最小值等設置數值的驗證規則。 parsley為data-parsley-type="number"（驗證數值類型）設置步長，步長為html5的默認步長1。 警告!HTML5 type="number" 是非常規的。 默認步長為1幾乎是無用的。此外瀏覽器也支持type="number""",不會報錯；所以data-parsley-type="number"為避免輸入的值為""需要設置必填。可為任何數。 |
||||||||
| Integer #2.0 整數 |
|
type="number" 的支持並不好，IE11都不支持此type="number"，Chrome則是鍵盤輸入值無法鍵入。data-parsley-type="integer" 只允許輸入整數。 | ||||||||
| Digits #2.0 自然數 |
data-parsley-type="digits" |
註意：i18n的中文翻譯為了“號碼”，實際正則/^\d+$/為只允許輸入自然數。 | ||||||||
| Alphanum #2.0 正整數和字母 |
data-parsley-type="alphanum" |
只允許輸入字母或數字，根據正則/^\w+$/i不允許輸入小數或者正負符號作為內容的一部分。 | ||||||||
| Url #2.0 |
|
輸入內容必須為一個url；IE9-不支持type="url"； IE8-不支持data-parsley-type="url"； |
||||||||
| Minlength #2.0 字符串最小長度 |
|
輸入內容的最小字符長度。 | ||||||||
| Maxlength #2.0 字符串最大長度 |
|
輸入內容的最大字符長度。 | ||||||||
| Length #2.0 字符串長度範圍 |
data-parsley-length="[6, 10]" |
輸入內容的字符長度範圍；也可用minlength和maxlength替代此屬性的功能。 | ||||||||
| Min #2.0 數值最小值 |
|
驗證數值最小值 | ||||||||
| Max #2.0 數值最大值 |
|
驗證數值最大值 | ||||||||
| Range #2.0 數值範圍 |
|
驗證數值範圍 | ||||||||
| Pattern #2.0 正則表達式驗證格式 |
|
在屬性中驗證正則表達式格式 | ||||||||
| MinCheck #2.0 最小選中幾項復選框 |
data-parsley-mincheck="3" |
復選框最少需要選中幾項，如果不設置必填，未選中任何項的情況下不做驗證。屬性隨便設置在該組復選中的任何一項。 | ||||||||
| MaxCheck #2.0 最多選中幾項復選框 |
data-parsley-maxcheck="3" |
復選框最多選中幾項，如果要求至少選中一項則須設置必填。設置最多選中的項數請添加屬性到該組復選中的任意一項。 | ||||||||
| Check #2.0 選中復選的項數範圍 |
data-parsley-check="[1, 3]" |
該屬性設置選中項數範圍。要求至少選中一項需要設置必填；否則不選中任何項也不驗證該規則。 | ||||||||
| Equalto #2.0 | data-parsley-equalto="#anotherfield" |
驗證兩個輸入框內容輸入是否一直。值可根據被驗證輸入框的選擇器來定位。 |
parsley.js驗證固定長度沒有對應屬性，data-parsley-length="[2, 2]"提示：字符長度應該在 2 到 2 之間；data-parsley-pattern="\d{2}"提示：格式不正確。 提示的信息都不能表達字符串長度為定長2。
示例見下方：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>parsley-屬性測試</title>
</head>
<body>
<form id="form" action="index.html" method="post" data-parsley-validate>
<div>
<label for="userName">姓名：</label>
<input type="text" id="userName" name="userName" data-parsley-required="true"/>
</div>
<div>
<label for="email">郵箱：</label>
<input type="text" id="email" name="email" data-parsley-required="true" data-parsley-type="email"/>
</div>
<div>
<label for="age">年齡：</label>
<input type="text" id="age" name="age" data-parsley-type="integer" />
</div>
<div>
<label for="age1">測試trigger：</label>
<input type="text" id="age1" name="age1" data-parsley-type="integer" data-parsley-trigger="change"/>
</div>
<div>
<label for="salary">薪資：</label>
<input type="text" id="salary" name="salary" data-parsley-type="digits"/>
</div>
<div>
<label for="deposit">存款：</label>
<input type="text" id="deposit" name="deposit" data-parsley-type="number"/>
</div>
<div>
<label for="extractedCode">提取碼</label>
<input type="text" id="extractedCode" name="extractedCode" data-parsley-type="alphanum"/>
</div>
<div>
<label for="personWebSite">個人網站：</label>
<input type="text" id="personWebSite" name="personWebSite" data-parsley-type="url"/>
</div>
<div>
<label for="hobby">特長：</label>
<input type="text" id="hobby" name="hobby" data-parsley-length="[6, 10]"/>
</div>
<div>
<label for="minValue">最小值：</label>
<input type="text" id="minValue" name="minValue" data-parsley-min="5"/>
</div>
<div>
<label for="maxValue">最大值：</label>
<input type="text" id="maxValue" name="maxValue" data-parsley-max="6"/>
</div>
<div>
<label for="rangeValue">數值範圍：</label>
<input type="text" id="rangeValue" name="rangeValue" data-parsley-range="[6, 10]"/>
</div>
<div>
<label for="regularExpression">正則表達式：</label>
<input type="text" id="regularExpression" name="regularExpression" data-parsley-pattern="\d{2}"/>
</div>
<div>
<label>最少選中幾項復選：</label>
<input type="checkbox" name="xCheckbox" data-parsley-required="true"/>
<input type="checkbox" name="xCheckbox" data-parsley-mincheck="2"/>
<input type="checkbox" name="xCheckbox"/>
</div>
<div>
<label>最多選中幾項復選：</label>
<input type="checkbox" name="yCheckbox" data-parsley-required="true"/>
<input type="checkbox" name="yCheckbox" data-parsley-maxcheck="2"/>
<input type="checkbox" name="yCheckbox"/>
</div>
<div>
<label>選中幾項復選（範圍）：</label>
<input type="checkbox" name="zCheckbox" data-parsley-required="true"/>
<input type="checkbox" name="zCheckbox" data-parsley-check="[1,2]"/>
<input type="checkbox" name="zCheckbox"/>
</div>
<div>
<label>密碼：</label>
<input type="password" id="password1"/>
<input type="password" data-parsley-equalto="#password1"/>
</div>
<div>
<input type="submit" value="提交"/>
</div>
</form>
<script src="../jquery-1.x.min.js"></script><!-- 依賴的jquery版本必須>=1.8 -->
<script src="parsley.min.js"></script>
<script src="i18n/zh_cn.js"></script><!-- 本地化提示信息 -->
<script>
$(function(){
//$(‘#form‘).parsley();//調用parsley表單驗證插件(提交時才會驗證 是否必填和輸入格式)
$(‘#form‘).parsley().validate();//調用parsley表單驗證插件(頁面加載時就驗證 是否必填和輸入格式)
});
</script>
<body>
</html>
1.對於輸入框的已提示“必填”、“格式驗證”信息，則輸入內容切換會立即驗證格式和是否必填；
2.parsley()和parsley().validate()
$(‘#form‘).parsley();在提交時出現提示信息，之後修改內容就會立即驗證。
如果希望加載頁面時就提示必填信息，請將$(‘#form‘).parsley();改為$(‘#form‘).parsley().validate(); 且parsley().validate()會對頁面第一個輸入框聚焦。
3.data-parsley-trigger="change"改變值後立即驗證（第一次輸入值change事件後才驗證，之後則是輸入即驗證）。
須註意$(‘#form‘).parsley().validate();在加載頁面時對未設置必填的項，輸入內容也不會及時出現格式錯誤的提示（不設置必填，加載頁面時沒提示信息），在提交一次後才觸發了提示信息，之後修改輸入值才能每次提示錯誤信息。 針對這種情況可同時添加data-parsley-trigger="change"；
parsley之驗證屬性設置