项目常见问题及解决方案 --表单验证

form表单验证

ref='ruleForm' :mode='ruleForm' :rule='rules'

一行代码为例:

<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
  <el-form-item label="名称" prop="key">
    <el-input v-model="ruleForm.key"></el-input>
  </el-form-item>
<el-form>

在data中定义(key代表需要校验的类)

rules: {
    key: [
        { required: true, message: '不能为空', trigger: 'blur' },
            // required: 定义是否必填 message: 提示内容  trigger: 校验方式(change: 内容改变时校验, blur: 失去焦点时校验)
        { type: 'string', pattern: /^(0|[1-9][0-9]*)$/, required: true, message: '格式错误', trigger: 'change' },
            // message相同时多种校验可以写在一起
            // type: 类型校验 基础类型或应用类型都可以(例: string, number, array等)
            // pattern: 正则, 
        { max: 50, message: '最多输入50个个字符', trigger: 'blur' },
            // 最多可输入字符数
    ],
    img: [//如果是必填, 则定义校验]
}

定义好了规则之后, 要在某一方法中多表单进行校验
一般在保存时对整个表单进行校验:

this.$refs.ruleForm.validate((valid) => {}

全部检验通过,valid为true, 否则为false
但是比如在上传图片或者附件时, 上传成功之后并不能触发校验, 此时则需要单独对该属性进行校验, 可以在上传成功的钩子函数中定义

this.$refs.ruleForm.validateField('img')

有时候我们在弹窗中点击保存,校验未通过, 然后关闭了弹窗, 当你再次点开弹窗的时候, 之前检验未通过的提示语还会存在(列表--新增之间也会出现这种情况),此时你就需要清除表单验证

// 定义一个fangf,方便在多处使用, 出入ref后面绑定的ruleForm
clearValidate (formName) {
  this.$refs[formName].clearValidate();
},

一般我们在关闭弹窗,或者返回列表时调用此方法

有时我们编辑了内容然后返回了上一步, 再次进入时表单内容一人存在, 所以我们有返回时也需要重置一下form表单

resetForm (formName) { 
   this.$refs[formName].resetFields();
},