vue element UI表单验证，自定义验证规则

Qlittleboy

已于 2024-01-29 11:57:31 修改

阅读量442

点赞数

分类专栏： web前端文章标签：前端

于 2023-09-14 09:51:47 首次发布

本文链接：https://blog.csdn.net/qq_21810059/article/details/132869843

版权

web前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

validator

可以为指定字段自定义验证函数——这就相当于把前边配置的东西用js按照以前的方式编写验证逻辑了。虽然麻烦点，但是能实现比较复杂的业务逻辑判断。

<el-form-item
                    label="中奖概率"
                    prop="rate"
                    :rules="[
                      { required: true, message: '中奖概率不能为空'},
                      { type: 'number',validator:(rules,value,callback) =>{
                            if((value+'').indexOf('.')>0){
                                callback(new Error('中奖概率必须为整数'));
                            }else if(value>100||value<=0){
                                callback(new Error('中奖概率必须为小于100的整数'));
                            }else{
                                //这里已验证通过
                                callback()
                            }
                        }
                      }
                    ]"
            >
         <el-input v-model.number="editnumberValidateForm.rate" autocomplete="off"
                   placeholder="输入小于100的整数" style="width: 160px">
          </el-input>
</el-form-item>