Layui 表单高级应用

作者:vkvi 来源:ITPOW(原创) 日期:2018-7-10

Layui 可以美化表单控件,可以实现一些表单功能。在其官网上已经介绍了基本的用法,但是有些不常用的地方却没有介绍到。

一、radio、checkbox 不显示

radio、checkbox 本来可以将原始的这类 HTML 控件直接转换成 layui 风格的控件的,但是有时候会发现它不显示。需要从下面两个方面检查:

  • 上层 form 或其他元素标签是不是缺少了 class="layui-form"
  • JS 是不是缺少了 layui.use('form', function (){});

如上这两步,layui.use('form' 告诉 layui 我们将对 class 为 layui-form 的表单进行美化呈现。

二、如何做好看的文件上传框

和 radio 不同,radio 是转换 <input type="radio",这里并不是转换 <input type="file",而是转换 <button,然后再动态创建一个 <input type="file",也是两步,第一步 HTML:

第二步 JS:

.NET 请继续阅读本文最后关于 form 的 enctype。

三、为表单赋初始值

这个其实官方是有代码的,但是官方作者没有将关键点强调出来,或者存在一些误导。也是两点:

在 HTML form 标签中,要加上 lay-filter="form1",注意是 lay-filter,不是 layui-filter,那个 form1 名称随便起,只是后面要用到。

然后是 JS 代码,注意 layui.form.val 有两个参数,第一个就是前面提到的 form1,第二个是 JSON 格式,而 userStatus 对应的是一批 name 为 userStatus  的 radio,1 是要选中的那个 radio 的 value 值。

校验

官方文档介绍了文本框的校验,但是如何要求 radio 必须选择?如何要求文件必须选择?

也是两个地方,这次我们先写 JS 代码。

同样,凡是使用 layui.form 的地方,都要放在 layui.use('form', function (){}); 中。

layui.form.verify 的参数是个 JSON 对象。

然后再在 radio 组的外层 HTML 控件上写属性 lay-verify="mustRadio" lay-verify-msg="请选择会员类型",再在文件选择框的外层控件上写属性 lay-verify="mustFile" lay-verify-msg="请选择要导入的文件"。

多说一句,verify 写好放在那里就可以了,不需要我们显式调用,layui 有一套机制会自动调用。

五、在 ASP.NET 中如何处理上传文件

layui 美化上传文件是转换一个已经存在的 button ,并不是转换一个已经存在的 file 框,所以 ASP.NET 中是没有 FileUpload 控件的,所以 ASP.NET 是不会添加 enctype 的,需要我们手动添加,否则  layui 自动创建的 file 框上传文件无效。

相关文章