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

￡神魔★判官ぃ 2023-03-01 09:09 20阅读 0赞

### **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"他只能校验一个，一个选中了他就以为两个都选择了边框成了绿色。![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70][]

![2020072311081935.png][] 两个都没有选的效果

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70]: /images/20230209/ae4b6fe9de2f4eda9bc8e0bf90195f1f.png
[2020072311081935.png]: /images/20230209/3af19e9263244565a95870db6bc4b72c.png
[20200723110844730.png]: https://img-blog.csdnimg.cn/20200723110844730.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200723111148639.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0,size_16,color_FFFFFF,t_70