技术教程 荐 前端框架Layui学习三：表单元素、表单对象 正文

荐 前端框架Layui学习三：表单元素、表单对象

2022-08-02,,,,

Layui

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，拿来即用。

一、表单元素

在一个容器中设定 class=“layui-form” 来标识一个表单元素块

1、单行输入框

required：注册浏览器所规定的必填字段
lay-verify：注册form模块需要验证的类型
class=“layui-input”：layui.css提供的通用CSS类

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" lay-verify="required" lay-reqtext="用户密码是必填项" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
</form>

2、组装行内表单

class=“layui-inline”：定义外层行内
class=“layui-input-inline”：定义内层行内

<form class="layui-form" action="">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">验证手机</label>
      <div class="layui-input-inline">
        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">验证邮箱</label>
      <div class="layui-input-inline">
        <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
</form>

3、下拉列表

lay-search=""：开启搜索匹配功能，支持下拉过滤
属性selected可设定默认项
属性disabled开启禁用，select和option标签都支持

<form class="layui-form" action="">
   <div class="layui-form-item">
    <label class="layui-form-label">单行选择框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao">
          <option value=""></option>
          <option value="0">写作</option>
          <option value="1" selected="">阅读</option>
          <option value="2">游戏</option>
          <option value="3">音乐</option>
          <option value="4">旅行</option>
          <option value="5">动漫</option>
      </select>
    </div>
  </div>

    <div class="layui-form-item">
        <div class="layui-inline">
    <label class="layui-form-label">籍贯</label>
    <div class="layui-input-inline">
      <select name="interest" lay-filter="aihao" lay-search="">
          <option value=""></option>
          <option value="0">北京</option>
          <option value="1" selected="">江苏</option>
          <option value="2">安徽</option>
          <option value="3">江西</option>
          <option value="4">广东</option>
          <option value="5">广西</option>
      </select>
    </div>
        </div>
  </div>

</form>

4、单选框 

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" checked="">
      <input type="radio" name="sex" value="女" title="女">
      <input type="radio" name="sex" value="禁" title="禁用" disabled="">
    </div>
  </div>
</form>

5、复选框

属性title可自定义文本
属性checked可设定默认选中
属性lay-skin可设置复选框的风格
设置value="1"可自定义值，否则选中时返回的就是默认的on

<form class="layui-form" action="">
 <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-filter='hobby' value='写作' name="hobby" title="写作">
                <input type="checkbox" lay-filter='hobby' value='阅读' name="hobby" title="阅读">
                <input type="checkbox" lay-filter='hobby' value='发呆' name="hobby" title="发呆">
            </div>
        </div>
</form>

6、原始复选框 

<form class="layui-form" action="">
 <div class="layui-form-item" pane="">
    <label class="layui-form-label">原始复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
      <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
      <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
    </div>
  </div>
</form>

7、开关

使用checkbox实现
lay-skin="switch"使用皮肤

<form class="layui-form" action="">
 <div class="layui-form-item">
    <label class="layui-form-label">开关-默认开</label>
    <div class="layui-input-block">
      <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="开|关">
    </div>
  </div>
</form>

8、文本域 

<form class="layui-form" action="">
 <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
    </div>
  </div>
</form>

9、富文本编辑器 

<body style="padding: 20px">

<form class="layui-form" action="">
 <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">编辑器</label>
    <div class="layui-input-block">
      <textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_demo_editor"></textarea>
    </div>
  </div>
</form>

    <script src="../static/css/layui.js"></script>

    <script type="text/javascript">
        layui.use(["jquery",'rate','carousel','form','layedit'],function() {
            let $ = layui.jquery;
            var rate = layui.rate;
            var carousel = layui.carousel;
            var layedit = layui.layedit;

            var editIndex = layedit.build('LAY_demo_editor');

        });
    </script>
</body>

10、联动选择框 

<form class="layui-form" action="">
 <div class="layui-form-item">
    <label class="layui-form-label">行内选择框</label>
    <div class="layui-input-inline">
      <select name="quiz1">
        <option value="">请选择省</option>
        <option value="浙江" selected="">浙江省</option>
        <option value="你的工号">江西省</option>
        <option value="你最喜欢的老师">福建省</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="quiz2">
        <option value="">请选择市</option>
        <option value="杭州">杭州</option>
        <option value="宁波" disabled="">宁波</option>
        <option value="温州">温州</option>
        <option value="温州">台州</option>
        <option value="温州">绍兴</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="quiz3">
        <option value="">请选择县/区</option>
        <option value="西湖区">西湖区</option>
        <option value="余杭区">余杭区</option>
        <option value="拱墅区">临安市</option>
      </select>
    </div>
  </div>
</form>

二、form对象

预设元素属性

属性名 属性值 说明
title 任意字符 设定元素名称
lay-skin switch（开关风格） primary（原始风格） 定义元素的风格，目前只对 checkbox 元素有效，可将其转变为开关样式
lay-filter 任意字符 事件过滤器，主要用于事件的精确匹配
lay-submit 无需填写值 绑定触发提交的元素，如button

事件监听

语法：form.on(‘event(过滤器值)’, callback);
form支持的事件如下：

event 描述
select 监听select下拉选择事件
checkbox 监听checkbox复选框勾选事件
switch 监听checkbox复选框开关事件
radio 监听radio单选框事件
submit 监听表单提交事件

默认情况下，事件所监听的是全部的form模块元素，但如果你只想监听某一个元素，使用事件过滤器即可。
如：

<select lay-filter="test"></select>
form.on('select(test)', function(data){
  console.log(data);
});

1.监听提交事件submit 

<body style="padding: 20px">

    <form class="layui-form" action="">


        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" lay-verify="required" lay-reqtext="用户密码是必填项" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">验证手机</label>
                <div class="layui-input-inline">
                    <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">验证邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">籍贯</label>
                <div class="layui-input-inline">
                    <select name="interest" lay-filter="jiguan" lay-search="">
                        <option value=""></option>
                        <option value="0">北京</option>
                        <option value="1" selected="">江苏</option>
                        <option value="2">安徽</option>
                        <option value="3">江西</option>
                        <option value="4">广东</option>
                        <option value="5">广西</option>
                    </select>
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" lay-filter='sex' value="男" title="男" checked="">
                <input type="radio" name="sex" lay-filter='sex' value="女" title="女">
                <input type="radio" name="sex" lay-filter='sex' value="禁" title="禁用" disabled="">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-filter='hobby' value='写作' name="like[write]" title="写作">
                <input type="checkbox" lay-filter='hobby' value='阅读' name="like[read]" title="阅读">
                <input type="checkbox" lay-filter='hobby' value='发呆' name="like[daze]" title="发呆">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否英语8级</label>
            <div class="layui-input-block">
                <input type="checkbox" checked="" name="english" lay-skin="switch" lay-filter="switchTest" lay-text="开|关">
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

</form>

    <script src="../static/css/layui.js"></script>

    <script type="text/javascript">
        layui.use(["jquery",'form','element'],function() {
            let $ = layui.jquery;
            var form = layui.form;
            var element = layui.element;


            //监听提交
            form.on('submit(demo1)', function(data){
                //console.log(data) //被执行事件的元素DOM对象，一般为button对象
                console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name：value}
                return false;  //阻止表单跳转，如果需要表单跳转，去掉这段即可

            });

        });
    </script>
</body>

2.监听下拉框改变事件select

  form.on('select(jiguan)', function(data){
                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值
                console.log(data.othis); //得到美化后的DOM对象
            });

3.监听复选框改变事件checkbox

form.on('checkbox(hobby)', function(data){
                console.log(data.elem); //得到checkbox原始DOM对象
                console.log(data.elem.checked); //是否被选中，true或者false
                console.log(data.value); //复选框value值，也可以通过data.elem.value得到
                console.log(data.othis); //得到美化后的DOM对象
});

4.监听开关改变事件switch

form.on('switch(switchTest)', function(data){
                console.log(data.elem); //得到checkbox原始DOM对象
                console.log(data.elem.checked); //开关是否开启，true或者false
                console.log(data.value); //开关value值，也可以通过data.elem.value得到
                console.log(data.othis); //得到美化后的DOM对象
});

5.监听单选框选中事件radio

form.on('radio(sex)', function(data){
  console.log(data.elem); //得到radio原始DOM对象
  console.log(data.value); //被点击的radio的value值
});

6.元素渲染
form.render(type, filter); 方法。第一个参数：type，为表单的 type 类型，可选。默认对全部类型的表单进行一次更新。第二个参数：filter，为 class=“layui-form” 所在元素的 lay-filter="" 的值。你可以借助该参数，对表单完成局部更新。

可局部刷新的 type 如下表：

参数(type)值 描述
select 刷新select选择框渲染
checkbox 刷新checkbox复选框渲染
radio 刷新radio单选框渲染 
form.render(); //更新全部
form.render('select'); //刷新select选择框渲染
form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态


<body style="padding: 20px">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">籍贯</label>
                <div class="layui-input-inline">
                    <select name="interest" lay-filter="jiguan" id="jiguan" lay-search="">
                        <option value=""></option>
                        <option value="0">北京</option>
                        <option value="1" selected="">江苏</option>
                        <option value="2">安徽</option>
                        <option value="3">江西</option>
                        <option value="4">广东</option>
                        <option value="5">广西</option>
                    </select>
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                <button type="reset" class="layui-btn" id="btn1">向select里面添加一个深圳</button>
            </div>
        </div>

</form>

    <script src="../static/css/layui.js"></script>

    <script type="text/javascript">
        layui.use(["jquery",'form','element'],function() {
            let $ = layui.jquery;
            var form = layui.form;
            var element = layui.element;

            //向select里面添加一个深圳
            $("#btn1").click(function () {
                //得到select对象
                var jg=$("#jiguan");
                alert(jg.html());
                jg.append("<option value=深圳>深圳</option>");
                alert(jg.html());
                form.render("select");
            });
            
        });
    </script>
</body>

7.表单初始赋值
语法：form.val(‘filter’, object);
用于给指定表单集合的元素赋值和取值。如果 object 参数存在，则为赋值；如果 object 参数不存在，则为取值。第二个参数中的键值是表单元素对应的 name 和 value。
1）给表单赋值

form.val("formtest",{  //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    username:'鸣人',
                    password:'123456',
                    phone:'1234567890',
                    email:'1234@qq.com',
                    interest:'广西'
                 });

2）获取表单区域所有值

var data1 = form.val("formTest");


<body style="padding: 20px">

    <form class="layui-form" action="" lay-filter="formtest">


        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" lay-verify="required" lay-reqtext="用户密码是必填项" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">验证手机</label>
                <div class="layui-input-inline">
                    <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">验证邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">籍贯</label>
                <div class="layui-input-inline">
                    <select name="interest" lay-filter="jiguan" id="jiguan" lay-search="">
                        <option value=""></option>
                        <option value="0">北京</option>
                        <option value="1" selected="">江苏</option>
                        <option value="2">安徽</option>
                        <option value="3">江西</option>
                        <option value="4">广东</option>
                        <option value="5">广西</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-filter='hobby' value='写作' name="hobby" title="写作">
                <input type="checkbox" lay-filter='hobby' value='阅读' name="hobby" title="阅读">
                <input type="checkbox" lay-filter='hobby' value='发呆' name="hobby" title="发呆">
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="btn2">初始化表单</button>
            </div>
        </div>

</form>



    <script src="../static/css/layui.js"></script>

    <script type="text/javascript">
        layui.use(["jquery",'form','element'],function() {
            let $ = layui.jquery;
            var form = layui.form;
            var element = layui.element;
            
            $("#btn2").click(function(){
                form.val("formtest",{  //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    username:'鸣人',
                    password:'123456',
                    phone:'1234567890',
                    email:'1234@qq.com',
                    interest:'广西'
                 });

                //假设从后台取到的值，拆分得到数组
                var hobby="写作,发呆";
                var hobbys=hobby.split(",");
            //得到hobbyElem

                var hobbyElem=$("[name='hobby']");
                $.each(hobbys,function (i,str) {
                    alert(str);
                    $.each(hobbyElem,function (j,item) {

                    var jdom=$(item); //把dom转jdom
                    if(jdom.val()===str){
                        jdom.attr("checked","checked");
                    }
                })
            })
                form.render();
        });

        });
    </script>
</body>

8、表单验证
表单的验证需要在表单元素上加上 lay-verify="" 属性值

<input type="text" lay-verify="email"> 
 
还同时支持多条规则的验证，如下：
<input type="text" lay-verify="required|phone|number">

相关的值：
required：非空验证
phone：手机号验证
number：数值验证
url：链接地址验证

            form.verify({
                //我们既支持上述函数式的方式，也支持下述数组的形式
                //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
                        ] 
});

本文地址：https://blog.csdn.net/zhengzaifeidelushang/article/details/107347972

《荐 前端框架Layui学习三：表单元素、表单对象.doc》

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!