LAYUI-FROM

select的渲染

• 下拉框的值是动态渲染的，需要使用layui.form.render(type, filter)/layui.form.render()重新渲染一次，最好是在方法提里面添加上，每个渲染都是重新渲染一次，确保不会出现遗漏。

事件

• layui.from.on('event(filter)', function(data){
      //data存在数据
      console.log(data)
  }) 
  1
  2
  3
  4

• event => input/select/button/submit/radio/switch

获取from表单的数据

• layui.from.val("lay-filter")   
  1

• 注：lay-filter是from标签的属性

回填from表单的数据

• layui.from.val("lay-filter", {key:value,...})
  1

  注：lay-filter是from标签的属性

• input的name属性的值要和key对应

自定义验证

• layui.from.verify({
      name:function(val,dom){
          // val --> 值
          // dom --> DOM元素
          if(val != null){
              return "我是文字"
          }
      },
  })
  1
  2
  3
  4
  5
  6
  7
  8
  9

• input/select 的属性是lay-verify=“required”，使用 | 号可以使用多个验证。

• 已经存在的验证：required（必填项）phone（手机号）email（邮箱）url（网址）number（数字）date（日期）identity（身份证）

from提交

• layui.from.submit(filter,function(data){
      //data.field存在表单数据
      console.log(data)
      return false;
  }) 
  1
  2
  3
  4
  5

• button按钮必须存在一个属性，lay-submit，不需要值，写上就行。

• 回调中加上return false; ，可以阻止from提交后的跳转

注

1. 以上所述filter，除了from回填和获取，其它皆是自身的lay-filter的值

2. layui的input和select的动态禁用也是需要重新渲染的，不然会有意想不到的效果。

   ​ 禁用

   • $(`#id`).attr("disabled", state) 
     1

     添加背景色，移除只需要改为removClass

   • $(".layui-input").addClass("layui-disabled")
     1

简单的使用lyui-from