Element UI + validator规则验证自定义正则表达式验证金额

最新推荐文章于 2022-11-05 15:04:07 发布

好好睡觉

最新推荐文章于 2022-11-05 15:04:07 发布

阅读量1.2k

点赞数

分类专栏：前端学习文章标签： elementui html5 javascript vue.js css

原文链接：https://blog.csdn.net/xiongdaandxiaomi/article/details/108494102

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Element UI + validator规则验证自定义正则表达式验证金额

表单项

<el-form-item label="支付金额(元)：" prop="money">
          <el-col :span="11">
            <el-input type="text" v-model="payForm.money"> </el-input>
          </el-col>
        </el-form-item>

自定义校验规则（根据自己业务需求来修改）

const validateMoney = (rule, value, callback) => {
      console.log('validateMoney', value)
      if (value > this.payForm.waitPayMoney) {
        callback(new Error('计划付款金额需小于待付金额'))
      } else {
        callback()
      }
    }

校验规则

money: [
          { required: true, trigger: 'blur', message: '金额不能为空' },
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: '请输入正确额格式,可保留两位小数'
          },
          { validator: validateMoney, trigger: 'blur' }
        ]