#### 表單html
jqform把表單驗證變得非常的簡單,你只需在元素上添加jq-verify屬性,和jq-error屬性就可以實現驗證了
~~~html
<form id="form1" class="layui-form layui-form-pane" action="/php/success.php">
<div class="layui-form-item">
<label class="layui-form-label">文章標題</label>
<div class="layui-input-block">
<input type="text" name="title" required jq-verify="required|username" jq-error="請輸入標題|請輸入數字" placeholder="請輸入標題" autocomplete="off" class="layui-input ">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">所屬分類</label>
<div class="layui-input-inline">
<select name="city" jq-verify="required" jq-error="請輸入分類" lay-filter="verify">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">廣州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">上傳圖片</label>
<div class="layui-input-block">
<input type="file" name="file" class="layui-upload-file">
<input type="hidden" name="img" jq-verify="required" jq-error="請上傳圖片" error-id="img-error">
<p id="img-error" class="error"></p>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" jq-submit lay-filter="submit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
~~~
1、表單需要注意id與action,驗證規劃是通過ID來獲取到表單的,action是異步提交時的服務端地址。
2、文本框驗證:在文本框內容加上jq-verify,jq-error屬性,如果有多個驗證的方法,則用“|”格開,jq-error的錯誤提示也需要用“|”格開,且要與驗證的方法一一對應,具體代碼如下:
~~~html
<input type="text" name="title" jq-verify="required|username" jq-error="請輸入標題|請輸入數字" placeholder="請輸入標題" autocomplete="off" class="layui-input ">
~~~
注意:jqform的驗證如果沒有required,則在內容為空時就算有其它的驗證規則也不會驗證,但有內容時就會驗證。如下面的代碼,text的內容不是必須填寫的,但當你填寫的時候就會驗證是不是數字,不填寫則不驗證。所以說,需要必須且有其它驗證的請按上面的寫法。
~~~
<input type="text" name="title" jq-verify="username" jq-error="請輸入數字" placeholder="請輸入標題" autocomplete="off" class="layui-input ">
~~~
3、jqform提供了錯誤提示綁定到某個元素上的功能,常用在隱藏域。如上傳圖片,一般都會有個一隱藏域記錄,如果需要驗證這個隱藏域,錯誤提示就需要綁定到一個元素上,這樣才能定位錯誤提示的顯示位置。實現和上面的驗證是一樣的,但多出一個error-id,這個就是放顯示錯誤提示元素id,代碼如下;
~~~
<input type="hidden" name="img" jq-verify="required" jq-error="請上傳圖片" error-id="img-error">
<p id="img-error" class="error"></p>
~~~
4、按鈕需要注意兩個位置, jq-submit是必須的,lay-filter="submit"這個不是必須的,但如果不用異步提交的話,就是必須的了,這個是綁定表單提交的,代碼下如
~~~html
<button class="layui-btn" jq-submit lay-filter="submit">立即提交</button>
~~~
#### 引入jqform模塊
如果你自定義一個新的js頁面需要使用ajax模塊,則需要先引入,如果用模板原有的,此步可跳過,但表單ID必須是form1,代碼如下:
~~~
layui.define(['jquery', 'jqform'], function(exports) {
var $ = layui.jquery,
form = layui.jqform,
form.set({
"blur": true,
"form": "#form1"
}).init();
exports('myform', {});
});
~~~
#### 參數列表
| 參數 | 默認值 | 說明 |
| -------- | ---- | ---------------------------------------- |
| blur | true | 失去焦點時驗證 |
| form | form | 需驗證的表單 |
| dataType | json | 服務器返回數據類型 |
| complete | | 服務器返回數據后調用的自定義方法(注意影響的域,建議全局)name=jqcool&complete=test |
| url | | 請求的服務端地址 |
| loading | true | 是否啟用loading圖片 |
| method | post | 表單提交方式 |
|ajax |ture| 是否使用異步提交 |
|close |false| 是否關閉回調方法 |
提交到服務端處理完成后,服務端需返回以下json數據格式
~~~php
$data['status'] = 200;
$data['msg'] ="更新成功";
$data['url'] = "";
echo header("content-type:text/html; charset=utf-8");
echo json_encode($data);
~~~
| 參數 | 必填 | 說明 |
| ------ | ---- | ----------------------------------- |
| msg | 否 | 返回的提示信息 |
| url | 否 | 1、空或不定義時不操作 2、地址時跳轉到該地址 3、reload時刷新頁面 |
| status | 是 | 狀態,成功時為200,其它均為錯誤 |
上面返回代碼是彈出提示更新成功,頁面不做任何操作。
如果想刷新頁面呢,把url設成reload即可,代碼如下
~~~php
$data['status'] = 200;
$data['msg'] ="更新成功";
$data['url'] = "reload";
echo header("content-type:text/html; charset=utf-8");
echo json_encode($data);
~~~
###### 跳轉到地址
~~~php
$data['status'] = 200;
$data['msg'] ="更新成功";
$data['url'] = "jqadmin.jqcool.net";
echo header("content-type:text/html; charset=utf-8");
echo json_encode($data);
~~~