elemeng-ui 中el-form 表单如何校验

el-form

首先对el-form标签中的几个关键属性:
ref: 当前表单的唯一标识
model: 表单绑定的对象
rules: 字段校验规则

案例：


代码：

这里是引用

<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  <el-form-item
    label="年龄"
    prop="age"
    :rules="[
      { required: true, message: '年龄不能为空'},
      { type: 'number', message: '年龄必须为数字值'}
    ]"
  >
    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
    <el-button @click="resetForm('numberValidateForm')">重置</el-button>
  </el-form-item>
</el-form>

el-form-item标签中的prop值要跟el-input中v-model的值一致
rules字段用来定义各个字段具体的校验规则