layui 接触之表单（二）

关于layui 也是最近接手到这么一个项目开始研究的

<form class="layui-form yadmin-search-area input">
    <div class="layui-form-item">
        <div class="layui-inline" style="display: flex;  display: -webkit-box;display: -ms-flexbox;  display: -webkit-flex;flex-wrap: wrap;-webkit-flex-wrap: wrap;  -moz-flex-wrap: wrap;  -ms-flex-wrap: wrap;  -o-flex-wrap: wrap;  ">
            <div style="margin-bottom: 20px">
                <label for="name" class="layui-form-label">名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" autocomplete="off"
                           id="partCname" class="layui-input" placeholder="请输入关键字" maxlength="50">
                </div>
            </div>
            <div style="margin-bottom: 20px">
                <label for="states" class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <input type="text" name="satates" autocomplete="off"
                           id="partOldcode" class="layui-input" placeholder="请输入关键字" maxlength="50">
                </div>
            </div>
            <div style="margin-bottom: 20px">
                <label for="selectData" class="layui-form-label">下拉选</label>
                <div class="layui-input-inline">
                    <select name="selectData"  id="partDeliverType">
                        <option value=""></option>
                        <option value="01">下拉选1</option>
                        <option value="02">下拉选2</option>
                        <option value="03">下拉选3</option>
                    </select>
                </div>
            </div>
       
            <div style="margin-left:60px;margin-bottom: 20px">
                <button lay-submit="" id="searchBtn" lay-filter="search" class="layui-btn layui-btn-sm layui-btn-normal table-action">
                    查询
                </button>
                <input type="button" id="reset"  value="重置" class="layui-btn layui-btn-sm layui-btn-primary table-action">
            </div>
        </div>
    </div>
</form>

表单是一个后台项目里不可或缺的一部分

layui 官方提供了关于form的很多方法

前提也是在layui 的方法里去引用

<script>
layui.use('form', function(){
  var form= layui.form;
  
  form.on('submit(search)',function(){
//这里写提交时候的逻辑
}   )
  
});
</script>

关于表单反显官方提供了一个方法是根据获取到的数据用

form.val('filter', object);

用于给指定表单集合的元素赋值和取值。如果 object 参数存在，则为赋值；如果 object 参数不存在，则为取值

注：其中「取值」功能为 layui 2.5.5 开始新增

差点忘了做验证，layui有个属性

在表单元素上加上 lay-verify="" 属性值即可

而且官方是提供了几个属性值的

required（必填项）
phone（手机号）
email（邮箱）
url（网址）
number（数字）
date（日期）
identity（身份证）

同时支持多条规则的验证，格式：lay-verify="验证A|验证B"
如：lay-verify="required|phone|number"

到这里表单差不多就结束了

加个知识点

autocomplete="off"

这个属性是用来是为了防止记录之前填过的数据在填数据是显示出来，挺影响用户操作的