el-input效验问题

 el-input-number需要通过validator: this.validateQuantity函数来处理效验

<template>
  <el-form :model="form" :rules="rules" ref="form">
   <el-form-item label="订单号" prop="orderId">
      <el-input
       v-model="formData.orderId"
       clearable
       placeholder="请输入订单号"
       maxlength="40"
       show-word-limit
       />
    </el-form-item>
    <el-form-item label="数量" prop="quantity">
      <el-input-number v-model="form.quantity" :min="1" :max="100"></el-input-number>
    </el-form-item>
    <el-form-item label="支付时间" prop="payDate">
      <el-date-picker
       v-model="form.payDate"
       value-format="yyyy-MM-dd HH:mm:ss"
       type="datetime"
       placeholder="选择支付时间"
     />
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>
 
<script>
  export default {
    data() {
      return {
        form: {
          quantity: 1
        },
        rules: {
          orderId: [{ required: true, message: "请输入订单号", trigger: "blur" }],
          quantity: [
            { validator: this.validateQuantity, trigger: 'change' }
          ]，
          payDate: [
           { required: true, message: "请输入支付时间", trigger: "change" },
          ],
        }
      };
    },
    methods: {
      validateQuantity(rule, value, callback) {
        if (value < 1 || value > 100) {
          callback(new Error('数量必须在1到100之间'));
        } else {
          callback();
        }
      },
      submitForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            alert('提交成功!');
          } else {
            console.log('表单效验失败!');
            return false;
          }
        });
      }
    }
  };
</script>