1. 程式人生 > >jquery validate不支援動態生成的表單

jquery validate不支援動態生成的表單

jQuery Validate 外掛為表單提供了強大的驗證功能,讓客戶端表單驗證變得更簡單,同時提供了大量的定製選項,滿足應用程式各種需求。該外掛捆綁了一套有用的驗證方法,包括 URL 和電子郵件驗證,同時提供了一個用來編寫使用者自定義方法的 API。

基本用法如下:
一、匯入 js 庫

<script src="http://XXXXX/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://XXXXX/jquery-validation-1.14.0/dist/jquery.validate.min.js"
>
</script>

二、使用
html:

<form novalidate="novalidate" id="deliver-form" action="XXXX" accept-charset="UTF-8" method="post">
<label >收貨人:</label>
<input type="text" name="deliver_user">
</form>

script:

$('#deliver-form').validate({
     rules:{
         deliver_user:{ required:true
}, }, messages:{ deliver_user:{ required:'收貨人姓名不能為空'}, }, submitHandler:function(form){ $(form).ajaxSubmit({ success:function(res){ //提示操作成功或失敗 } }) } });

上面的用法對於頁面第一次載入form就生成的話,那麼是能夠正常驗證的,但如果form是動態生成的,例如使用vue變數判斷。
html:

<form v-if="isShow" novalidate="novalidate" id="deliver-form" action="XXXX" accept-charset="UTF-8" method="post">
<label >收貨人:</label>
<input type="text" name="deliver_user">
</form>

因為沒等Dom渲染完成就呼叫,是獲取不到form。一定要等到渲染完成才能獲取form,所以可以使用 setTimeout(function(){ //獲取dom的程式碼 },500);。