前端表单验证 for循环验证 自定义表单验证

<script>
export default {
  data() {
    return {
      formData: {
        userName: '',
      },
      // 校验规则
      rules: {
        userName: [
        { 
          required: true, //是否必填
          message: '用户名不能为空', //规则提示
          trigger: 'blur'  //何事件触发
        },
        //可以设置多重验证标准
        { 
           min: 3, 
           max: 5,  
           message: '长度在 3 到 5 个字符'
         },
        {
            pattern: /^[\u4E00-\u9FA5]+$/,  //正则
            message: '用户名只能为中文'
         }
         ]
      }
    }
  }
}
</script>  

提交按钮 需要加判断

        this.$refs["form"].validate(valid => {
 

        })

对象嵌套对象

<el-form-item label="店铺名称" :rules="rules.shopName" :prop="'cardDTOList.shopName'" >
  <el-input placeholder="请输入店铺名称" v-model="form.cardDTOList.shopName"/>
</el-form-item>

for循环中的表单验证

每个都需要加 红色字样

<div v-for="(dict,index) in form.cardDTOList">
    <el-form-item label="样式" :rules="rules.style" :prop="'cardDTOList.'+index+'.style'">
      <el-input placeholder="请输入样式" v-model="dict.style"/>
    </el-form-item>
  </div>

  

form: {
  cardDTOList: [{
    style: '',
 
  } ],
},

// 表单校验
rules: {
  style: [
    { required: true, message: "卡卷样式不能为空", trigger: "blur" }
  ],
}

自定义表单验证

rules: {
projectsList: [
  {required: true, validator: validatePass, trigger: "change"}
],
}

data() {
  var validatePass = (rule, value, callback) => {
    if (this.projectsList.length <= 0) {
      callback(new Error('请选择主营项目'));
    } else {
      callback();
    }
  };

<el-form-item label="主营项目" prop="projectsList">
  <treeselect
    :disable-branch-nodes="true"
    :multiple="true"
    :normalizer="normalizer"
    :options="appUserProjectOptions"
    placeholder="请选择主营项目"
    v-model="projectsList"/>
</el-form-item>