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

敲厉害的燕宝2024-07-26 8:42

注意：

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

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

html 复制代码

<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>

方法一：

javascript 复制代码

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

方法二：

javascript 复制代码

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

javascript 复制代码

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();
    }
  }
}

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

方法一：

方法二：

可以结合正则表达式使用~