博客

layui(五)——form组件常见用法总结

  • Post category:other

layui(五)——form组件常见用法总结

Layui是一款轻量级的前端UI框架，提供了丰富的组件和样式，可以快速构建高质量的Web应用。其中，form组件是Layui中常用的组件之一，用于创建表单。以下是关于Layui form组件常见用法总结的详细攻略：

1. Layui form组件常见用法总结

以下是Layui form组件常见用法总结：

  • 创建表单

可以使用Layui form组件创建表单。以下是一个使用Layui form组件创建表单的示例：

<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" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" 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" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

在此示例中，我们使用Layui form组件创建了一个表单，并添加了用户名和密码两个输入框，以及提交和重置按钮。

  • 表单验证

可以使用Layui form组件进行表单验证。以下是一个使用Layui form组件进行表单验证的示例：

<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" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" 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" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<script>
layui.use('form', function(){
  var form = layui.form;

  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>

在此示例中，我们使用Layui form组件进行了表单验证，并在提交按钮的点击事件中显示了表单数据。

2. 总结

Layui是一款轻量级的前端UI框架，提供了丰富的组件和样式，可以快速构建高质量的Web应用。其中，form组件是Layui中常用的组件之一，用于创建表单。Layui form组件常见用法包括创建表单和表单验证。在实际应用中，我们需要根据需要选择合适的Layui组件，以实现所需的Web应用功能。

Tags: