🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
#### 表单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); ~~~