parsley.js添加表單驗證功能,直接在html元素中添加對應屬性;
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";
