#### 表单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);
~~~