詳解lay-submitlay-filter

一、lay-submitlay-filter是什麼？

1、lay-submit，顧名思義，是提交事件的觸發方法，我們在使用layui框架時，經常會使用到。

2、lay-filter，是lay-submit的配套使用方法，用於過濾不合法數據，同時也可以觸發lay-submit的提交事件。

3、通俗點說，lay-submitlay-filter是一種方便用戶輸入信息校驗的方法，適用於layui框架搭建的動態頁面。

二、lay-submitlay-filter的優勢

1、降低了前後端協作的成本，讓前端能夠自主完成表單數據的校驗，減輕了後端工程師的負擔。

2、提升用戶體驗，通過lay-filter的配置，能夠實時對用戶輸入的數據進行校驗及錯誤提示，有效避免非法數據的提交，提高用戶使用體驗。

三、lay-submitlay-filter實例演示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>lay-submitlay-filter實例演示</title>
  <link rel="stylesheet" href="../src/layui/css/layui.css">
</head>
<body>
 
<div class="layui-row">
  <div class="layui-col-md6">
    <form method="post" 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="login">登錄</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>
</div>
 
<script src="../src/layui/layui.js" charset="utf-8"></script>
<script>
//Demo
layui.use(['form', 'jquery'], function(){
  var form = layui.form,
      $ = layui.jquery;
 
  //監聽提交
  form.on('submit(login)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最終的提交信息'
    })
    return false;
  });
});
</script>
 
</body>
</html>

四、代碼分析

首先需要載入layui框架的依賴文件，然後通過form對象的on方法監聽匹配的lay-filter屬性值。其中，注意到lay-verify屬性值為required，表示必填項，當用戶沒有輸入或輸入不符合規格時，會彈出提示框提示用戶重新輸入。

on方法的回調函數中，使用layer.alert方法將用戶輸入的數據反饋給用戶。在代碼最後，layui.use方法中載入了jquery和form模塊。

五、總結

通過以上分析，我們可以看出lay-submitlay-filter在layui框架中的重要作用。通過對用戶輸入數據的快速校驗，大大提高了用戶的體驗感，同時減輕後端工程師處理表單數據的負擔，實現了前後端交互的良好配合。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/247528.html