elementUI的表单校验总结 // 测试环境出现表单有值但非空校验不通过的情况

原创

于 2021-01-27 14:46:56 发布

· 1.2k 阅读

1 ·

版权

文章标签：

#vue #js #elementui

本文总结了ElementUI的表单校验，包括纯表单静态校验和表格内表单动态增减及校验。在静态校验中强调了model绑定对象、prop与v-model字段一致以及rules的对应规则。在动态增减表单场景下，通过JS代码片段解释了如何避免测试环境中出现有值但校验不通过的问题，如需绑定model需转为对象数组，并确保新增表单时字段完整。此外，还提及了ElementUI的数值校验、自定义校验规则以及动态增减表单项的验证规则设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.纯表单静态校验

// elementUI官网代码段截取
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>
<script>
  export default {
   
    data() {
   
      return {
   
        ruleForm: {
   
          name: '',
        },
        rules: {
   
          name: [
            {
    required: true, message: '请输入活动名称', trigger

最低0.47元/天解锁文章