域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過
這篇文章主要介紹了AmazeUI的JS表單驗(yàn)證框架實(shí)戰(zhàn)示例分享，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
1、需求
做一個(gè)內(nèi)嵌到UTribe(一款A(yù)ndroid App)的學(xué)生會(huì)活動(dòng)報(bào)名系統(tǒng)前端頁(yè)面，報(bào)名人數(shù)最少1人最多4人，表單動(dòng)態(tài)增加最多四個(gè)，其中隊(duì)名必填，隊(duì)長(zhǎng)的所有信息必填，隊(duì)員的QQ、手機(jī)號(hào)碼選填，參賽時(shí)間必選。
2、初步設(shè)計(jì)
這個(gè)項(xiàng)目只給了半天時(shí)間，而且之前沒有在Android端調(diào)試頁(yè)面的經(jīng)驗(yàn)，而且沒有調(diào)試布局的機(jī)會(huì)，只能一次做完部署上去看看效果如何。
3、問題
本人是小白，以前做表單驗(yàn)證都是在提交之前用js檢查一下參數(shù)，但這個(gè)項(xiàng)目中參數(shù)較多，而且同一字段的校驗(yàn)方式不同（隊(duì)長(zhǎng)QQ、手機(jī)必填而隊(duì)員不用），若再用之前的方法工作量顯然較大，有沒有更好的方法呢？這時(shí)候我看到了amazeUI的js驗(yàn)證框架，交互效果不錯(cuò)。
先將目標(biāo)表單綁定一個(gè)validator函數(shù)，然后在需要驗(yàn)證的字段加上屬性（required、pattern、mixlength等等），pattern除了HTML5中已有的email、url等正則，還可以自定義，最后填充function submit來確定表單信息都合法之后的操作。然后我把這個(gè)框架運(yùn)用到了自己的項(xiàng)目上，添加了自定義正則表達(dá)式
這里的驗(yàn)證可以根據(jù)需求添加到對(duì)應(yīng)字段上，如隊(duì)長(zhǎng)的QQ、手機(jī)號(hào)碼添加驗(yàn)證而隊(duì)員的不用添加。
<input type="text" class="js-pattern-qq" data-validation-message="QQ號(hào)不符合規(guī)范噢"
name="qq" placeholder="輸入QQ號(hào)" required>
問題1：
這啥意思呢？仔細(xì)一看，原來是解釋器認(rèn)不出你的validator方法把，應(yīng)該是少了某個(gè)js引用，遂導(dǎo)包解決。
問題2：
由于隊(duì)員表單的信息和隊(duì)長(zhǎng)的很像，但我總不能一條一條append上去吧？這會(huì)產(chǎn)生兩個(gè)問題，第一是工作量大，第二是代碼不簡(jiǎn)潔，維護(hù)起來麻煩，遂想到用clone一個(gè)寫好的div模板的方法來解決。
問題3：
由于要將每個(gè)隊(duì)員的數(shù)據(jù)整合成json數(shù)組的形式傳遞到后臺(tái)，在檢驗(yàn)請(qǐng)求參數(shù)時(shí)發(fā)現(xiàn)只有隊(duì)長(zhǎng)有g(shù)ender屬性而隊(duì)員沒有，后來發(fā)現(xiàn)是因?yàn)閞adio一個(gè)name只有一個(gè)值，所以要?jiǎng)討B(tài)改變clone模板的隊(duì)員的表單的radio的name屬性來實(shí)現(xiàn)不同隊(duì)員間gender的差異。
var radios = template.find('input[type=radio]');
radios.each(function(){
$(this).attr('name','gender'+g_index);
})
然后就能正常接收不同隊(duì)員的性別屬性了。
問題4 ：
覆寫完submit方法提交表單后，原本以為到這基本完成了，但測(cè)試時(shí)發(fā)現(xiàn)若表單字段不合法，頁(yè)面會(huì)自動(dòng)刷新，提示信息閃現(xiàn)后消失，已填入的數(shù)據(jù)也沒了，這顯然不符合使用邏輯。后來發(fā)現(xiàn)問題出在
<button type="submit" style="width: 100%;height: 100% " class="am-btn am-btn-default">報(bào)名</button>
注意這里button的類型是submit而不是button，submit會(huì)在提交后自動(dòng)刷新頁(yè)面，解決辦法很簡(jiǎn)單，在validator對(duì)象的submit函數(shù)中檢驗(yàn)參數(shù)時(shí)，若不合法則return false，這樣頁(yè)面就不會(huì)自動(dòng)刷新了。
submit:function(){
var formValidity = this.isFormValid();
if(formValidity){
if(!member.postMembers()){
return false;
}
}else{
alert("輸入信息不合法！");
return false;
}
}
完成效果展示：
amazeui驗(yàn)證遇到的坑
jsp樣例：
form加上data-am-validator才能使驗(yàn)證生效：
<form id="addPopuForm" class="add-popu-form" data-am-validator>
<div class="inputItem">
<div class="inputName">姓名</div> <!--required必填，minlength最小長(zhǎng)度-->
<input type="text" id="name" name="name" class="" required minlength="2" maxlength="64" placeholder="請(qǐng)輸入2-64位字符" autocomplete="off">
</div>
<div class="inputItem"> <!--required必填-->
<div class="inputName">性別</div>
<select type="text" id="sex" name="sex" class="" required>
<option selected value="">請(qǐng)選擇</option>
<option value="0">男</option>
<option value="1">女</option>
</select>
</div>
<div class="inputItem">
<div class="inputName">年齡</div> <!--required必填，pattern正則表達(dá)式驗(yàn)證-->
<input type="text" required pattern="^([1-9]\d{0,1}|100|[1]\d{0,2}|200)$" id="age" name="age" class="" placeholder="請(qǐng)輸入2-100" autocomplete="off">
</div>
</form>
js：
//注意下面的坑，兩個(gè)配合才能生效
$("#addPopuForm").validator('destroy');//初始化，銷毀之前的驗(yàn)證
$('#addPopuForm').validator({validateOnSubmit: true});//初始化參數(shù)，可以有多個(gè)，具體見參考文檔
http://amazeui.org/javascript/validator，提交時(shí)驗(yàn)證，配合上面的銷毀實(shí)現(xiàn)銷毀
//重置表單
$("#addPopuForm")[0].reset();
//提交時(shí)進(jìn)行表單驗(yàn)證，formValidity為true通過驗(yàn)證
var formValidity = $('#addPopu').validator('isFormValid');
到此這篇關(guān)于AmazeUI的JS表單驗(yàn)證框架實(shí)戰(zhàn)示例分享的文章就介紹到這了,更多相關(guān)AmazeUI的JS表單驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
來源：腳本之家
鏈接：https://www.jb51.net/html5/741775.html
申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
