layui實現表單一鍵設置功能

需求就是 我給某個input框輸入一個值之後 點擊一鍵設置  其他input框的值就和剛纔的值相同

---

首先 先寫一個form表單 將上述的框包裹起來 之後

<div class="layui-col-lg5">
<label class="layui-form-label">要同步到其他地方的輸入框：</label>
    <div class="layui-input-block">
         <input type="text"  lay-verify="numbers|nlength" id="open_hand_value" placeholder="0" autocomplete="off" class="layui-input" value="0">
    </div>
</div>

此時 他的id 是 open_hand_value

<div class="layui-col-lg5">
    <label class="layui-form-label"></label>
          <div class="layui-input-block">
                 <button class="layui-btn" data-type="batch-setting" id="batch-setting">一鍵設置</button>
          </div>
</div>

這是一鍵設置的按鈕 id 是 batch-setting

<input type="text" name="open_hand_{{ item.variety_id }}" value="{{ item.open_hand?item.open_hand:'0' }}" lay-verify="required|number|numbers|nlength" placeholder="" autocomplete="off" class="layui-input open_hand">

這個是要接收上面信息的輸入框 也就是最後的同步位置  class 是 open_hand

---

接下來 就是一鍵設置的按鈕 處理的邏輯 

$(document).on('click', '#batch-setting', function () {
  var open_hand = $('#open_hand_value').val();
  var regPos = /^\d+(\.\d+)?$/; //非負浮點數
  if(open_hand != null && open_hand != "" && open_hand != undefined) {
      if(!regPos.test(open_hand)){
                layer.msg('信息輸入提示', {time: 1000}, function () {
                });
                return;
            }
            $('.open_hand').val(open_hand);
   }
   layer.msg('處理成功', {time: 1000}, function () {
   });
});

可以看到 點擊按鈕之後 將 第一個輸入框的值獲取到之後 進行正則驗證 之後  賦值給要同步的輸入框內

大致的流程是這樣

覺得有用的就點個贊吧！