element-ui的form表单校验-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui的form表单校验。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

form表单校验基本三步：

1、定义验证规则

// 表单校验规则
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' },
          // 自定义校验规则
          { validator: validName, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur' },
          // 自定义校验规则
          { validator: validCode, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1, max: 300, message: '部门介绍要求1-300个字符', trigger: 'blur' }
        ]
      }

在data中定义表单校验规则，一个表单项可定义多条规则，表单项规则用数组，规则为对象，required为必须填写，message为校验提示信息，trigger为校验时机，可选blur和change，分别为失去焦点和数据变化；min/max为最小与最大字符个数，validator为自定义校验规则，参数可以直接写规则，也可以写函数。

2、配置模板，应用规则
      给表单设置 rules 属性传入验证规则
      给表单设置model属性传入表单数据
      给表单中的元素（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名

<el-form ref="deptForm" label-width="120px" :model="form" :rules="rules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
</el-form>

3、手动兜底验证

通过给form表单设置ref，使用$refs获取form元素，调用validate方法进行校验通过，resetFields方法重置表单文章来源地址https://www.toymoban.com/news/detail-505511.html

// 确定
    hSubmit() {
      // 表单兜底校验
      this.$refs.deptForm.validate(valid => {
        if (valid) { // true为校验通过
          this.isEdit ? this.doEdit() : this.doAdd()
        }
      })
    }

到了这里，关于element-ui的form表单校验的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！