【随笔】踩坑日记layui-verify的自定义表单验证,并弹出提醒(附完整代码)

网上查了很多资料,基本上所有代码都直接跳过验证,完全没反应,官方代码也说不清楚,研究了一下终于懂了。

<script src="./layui/layui.js" charset="utf-8"></script>
<link rel="stylesheet" href="./layui/css/layui.css"  media="all">
<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">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
    </div>
  </div>
</form>  
<script>
layui.use(['form'], function(){
     
  var form = layui.form
  ,layer = layui.layer
  //自定义验证规则
  form.verify({
     
    title: function(value){
     
      if(value.length < 5){
     
        return '标题至少得5个字符啊';
      }
    }
  });
  //监听提交
  form.on('submit(demo1)', function(data){
     
    layer.alert(JSON.stringify(data.field), {
     
      title: '最终的提交信息'
    })
    return false;
  });
});
</script>

以上代码提取自官方的代码示例
其中按钮部分,lay-filter是提交监听的过滤器值,button 不带传值,可以使用input

你可能感兴趣的:(【随笔】踩坑日记layui-verify的自定义表单验证,并弹出提醒(附完整代码))