Vue+Element给表单设置多个验证+规则Rules自定义

最新推荐文章于 2024-08-09 15:24:25 发布

敲厉害的燕宝

最新推荐文章于 2024-08-09 15:24:25 发布

阅读量563

点赞数 1

分类专栏： Vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_63456808/article/details/140515377

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

注意：

1、<el-form >的:rules="Rules" 这个Rules名字需要对应

2、<el-form-item>的prop="quantity"这个prop名字需要对应好

<el-dialog :title="title" v-dialogDrag :visible.sync="BoundOpen">
<el-form ref="Form" :model="Form" :rules="Rules" label-width="80px">
  <el-form-item label="数量" prop="quantity">
    <el-input v-model="quantity" placeholder="请输入数量"/>
  </el-form-item>

</el-form>
<div slot="footer" class="dialog-footer">
  <el-button type="primary" @click="Bound">确 定</el-button>
  <el-button @click="cancelBound">取 消</el-button>
</div>
</el-dialog>

方法一：

Rules: {
  quantity: [
    {required: true, message: "添加数量不能为空", trigger: "blur"},
    {digits: true, message: "必须输入整数", trigger: "blur"},
    {range: [1, 100], message: "输入数量超出范围", trigger: "blur"},
  ],
    }

方法二：

Rules: {
  quantity: [
    {validator: checkQuantity, trigger: 'blur'}
  ],
},

data() {
  const checkQuantity = (rule, value, callback) => {
    if (this.buttonFlag == 'unbind' || this.buttonFlag == 'editNormal') {
      if (value == null || value == '') {
        callback(new Error('请输入数量'));
      } else if (!/^\d+(\.\d+)?$/.test(value)) {
        callback(new Error('请输入合法的数字'));
      }else if (value == 0) {
        callback(new Error('数量不能为0'));
      } else {
        callback();
      }
    } else {
      callback();
    }
  }
}