form表单中input框以及select下拉框校验问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了form表单中input框以及select下拉框校验问题相关的知识,希望对你有一定的参考价值。

参考技术A (1):model="ruleForm" 绑定的ruleForm值是否挂载成功并且操作的是否是这个表单。

(2):rules="rules" 校验的规则格式绑定的rules是否定义并且格式正确为对象数组。

(3)el-form-item中的prop="name"是否和rules中的name: [ required: true, message: '请输入活动名称', trigger: 'blur' , ], 的名称一致,两个name是相同的,element的校验就是根据这个prop找对应的输入框的。

(4)<el-input v-model="ruleForm.name"></el-input> 的v-model="ruleForm.name"确保对象ruleForm中有name这个属性!
关于表单校验的大部分bug的原因就是这四步绑定的值有问题,完全都是细心问题!!!
———————————————————————————————————————————————

问题:明明输入框中输入了文字,却提示未输入
解决办法:input框中,trigger事件换成blur

trigger事件换成change

一般出现这问问题,都是校验问题,先看字段名有没有一致,再看trigger有没有正确

layui下拉选择框select不显示

弹层layer下拉框没有样式_不可点击_没有效果_渲染失效的解决办法

一、必须给表单体系所在的父元素加上 class="layui-form"

在一个容器中设定 class="layui-form"  来标识一个表单元素块,如果你不想用 form,你可以换成 div 等任何一个普通元素;记得要在 外层容器 中定义 class="layui-form",form 模块才能正常工作。

<form class="layui-form">
    <!-- 这里是form里面的代码 输入框,选择框、复选框,单选框等等 -->
</form>

 

二、调用依赖加载模块:form 

当你使用表单时,layui 会对 select、checkbox、radio 等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于 form 组件,所以你必须加载 form,并且执行一个实例;

 

layui.use(‘form‘, function(){
    var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功

    //……

    //但是,如果你的HTML是动态生成的,自动渲染就会失效
    //因此你需要在相应的地方,执行下述方法来进行渲染
    form.render();
});

 

三、更新渲染

有些时候,你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然 layui 不支持双向绑定机制,但没有关系,你只需要执行 form.render(type, filter); 方法即可。

第一个参数:type,为表单的 type 类型,可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表:

参数(type)值描述
select 刷新select选择框渲染
checkbox 刷新checkbox复选框(含开关)渲染
radio 刷新radio单选框框渲染
 
form.render(); //更新全部
form.render(‘select‘); //刷新select选择框渲染
//……

第二个参数:filter,为 class="layui-form" 所在元素的 lay-filter="" 的值。你可以借助该参数,对表单完成局部更新。

<!-- HTML 示例 -->
<div class="layui-form" lay-filter="test1"></div>
 
<div class="layui-form" lay-filter="test2"></div>
<!-- JS 示例 -->
<script>
layui.use(form, function(){
    var form = layui.form,
    form.render(null, test1); //更新 lay-filter="test1" 所在容器内的全部表单状态
    form.render(select, test2); //更新 lay-filter="test2" 所在容器内的全部 select 状态
    //……
});
</script>

 

四、弹层中同样的原理,需要更新渲染

<div id="layer-test" style="display: none;">
  <form class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">复选框</label>
      <div class="layui-input-block">
        <input type="checkbox" name="CSDN" lay-filter="like" title="复选框一" value="dongsir">
        <input type="checkbox" name="CSDN" lay-filter="like" title="复选框二" value="董先生">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">开关关</label>
      <div class="layui-input-block">
        <input type="checkbox" name="switch" lay-skin="switch" value="董辉">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">开关开</label>
      <div class="layui-input-block">
        <input type="checkbox" name="switch" checked lay-skin="switch" value="董先生的CSDN">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
      </div>
    </div>
  </form>
</div>
<script src="layui/layui.js"></script>
<script>
layui.use(form, function(){
  var form = layui.form,
      $ = layui.$;

    //layer示例

    layer.open({
        type: 1,
        title: [董先生的CSDN博客],
        shade: 0.4,
        area:[900px, 650px],
        content: $("#layer-test").html(),
        success: function(layero, index){
          form.render();
        }
    });
});
</script>

 

以上是关于form表单中input框以及select下拉框校验问题的主要内容,如果未能解决你的问题,请参考以下文章

如何控制select下拉选项的高度

[HTML]表单标签(form表单域input输入表单label标签select下拉表单textarea文本域)

ajax 用serialize()传的form表单参数 传select下拉框的text值

select单击提交表单

layui下拉选择框select不显示

Form