给element表单添加必填*星号的方法

1，利用rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

<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>  //这个prop的名字最好和下面的这个绑定的名字一样
  </el-form-item>
<el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
  </el-form-item>
</el-form>

 export default {
    data() {
      return {
        ruleForm: {
          name: '',
         },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
         }
      };
    },
 methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

在提交的时候就会校验。

2.直接添加一个属性required="true"这个只会出现一个红色的*。但是不会提交的时候不会检验。如果你要校验需要自己写代码弹窗提示不为空。

适用于一个el-form-item里面有两个要校验的内容。如果我写一个总的prop="affairtypeid"他只能校验一个，一个选中了他就以为两个都选择了边框成了绿色。

两个都没有选的效果

选中了一个的效果，都是绿色让用户以为通过了验证。所以这里我只写required="true"。然后提交时去验证是否为空，为空就提示请选择