amaze UI 如何添加原生表單驗證
阿新 • • 發佈:2017-09-20
func 初始化 req dset 無法 加載 maxlength nbsp 驗證
這段時間做的一個項目,整個系統就一個頁面,然後就是各種模態框,js裏拼HTML代碼,而且因為表單空留距離小,最後選定了amaze ui原生的表單驗證
在amaze ui官網找到 表單驗證。 但是amaze的 事例太少了,導致入坑,下面把我的解決方法分享給大家
正常情況下載添加amaze驗證很簡單,在form 後面添加 data-am-validator
form id="doc-vldX" action="" class="am-form" data-am-validator> <fieldset> <legend>JS 表單驗證</legend> <div class="am-form-group"> <label for="doc-vld-name-2">用戶名:</label> <input type="text" id="doc-vld-name-2" minlength="3" placeholder="輸入用戶名(至少 3 個字符)" required/> </div> <div class="am-form-group"> <label for="doc-vld-ta-2">評論:</label> <textarea id="doc-vld-ta-2"minlength="10" maxlength="100"></textarea> </div> <button class="am-btn am-b" type="submit" onclick="yanz1()">提交</button>
遇到第一個問題 type=“button” 無法驗證
解決方式 手動 去給form添加 validator ,下面手動添加寫成通用型,通過button 的id去獲取到form的id,然後給form添加validator
function daoshiCheck(th){ var formValidity1 =$(‘#‘+$(th)[0].id).parents(‘form:eq(0)‘).validator(‘isFormValid‘); if(!formValidity1){ return; }
第二個問題 由於只有一個頁面 加載的時候無法找到
data-am-validator
解決方式:在每個表單初始化的時候手動掃 data-am-validator
$(function(){ $(‘[data-am-validator]‘).validator(); })
amaze UI 如何添加原生表單驗證