vue实现金额校验

金额校验的实现方法

在Vue中实现金额校验通常涉及表单验证、正则表达式和自定义校验规则。以下是几种常见的实现方式：

使用VeeValidate进行校验

安装VeeValidate库：

npm install vee-validate

在Vue组件中配置金额校验规则：

import { extend } from 'vee-validate';
import { required, numeric, regex } from 'vee-validate/dist/rules';

extend('required', required);
extend('numeric', numeric);
extend('money', {
  validate: value => /^\d+(\.\d{1,2})?$/.test(value),
  message: '请输入有效的金额格式（如：100 或 100.00）'
});

模板中使用校验：

<validation-provider rules="required|money" v-slot="{ errors }">
  <input v-model="amount" type="text">
  <span>{{ errors[0] }}</span>
</validation-provider>

使用Element UI表单验证

对于使用Element UI的项目：

rules: {
  amount: [
    { required: true, message: '请输入金额', trigger: 'blur' },
    { pattern: /^\d+(\.\d{1,2})?$/, message: '金额格式不正确' }
  ]
}

模板部分：

<el-form-item label="金额" prop="amount">
  <el-input v-model="form.amount"></el-input>
</el-form-item>

自定义校验方法

创建自定义校验函数：

methods: {
  validateAmount(rule, value, callback) {
    if (!value) {
      return callback(new Error('金额不能为空'));
    }
    if (!/^\d+(\.\d{1,2})?$/.test(value)) {
      return callback(new Error('请输入正确的金额格式'));
    }
    callback();
  }
}

实时格式化输入

在输入时自动格式化金额：

watch: {
  amount(newVal) {
    this.amount = newVal.replace(/[^\d.]/g, '')
      .replace(/^\./g, '')
      .replace(/\.{2,}/g, '.')
      .replace('.', '$#$')
      .replace(/\./g, '')
      .replace('$#$', '.')
      .replace(/^(\d+)\.(\d\d).*$/, '$1.$2');
  }
}

常用金额正则表达式

1. 允许整数或两位小数： ^\d+(\.\d{1,2})?$

2. 必须包含两位小数： ^\d+\.\d{2}$

3. 允许千分位分隔符： ^(\d{1,3}(,\d{3})*|\d+)(\.\d{1,2})?$

4. 限制最大金额（如不超过100万）： ^(?!0\d)(\d{1,6}(\.\d{1,2})?)$

这些方法可以根据具体项目需求进行组合或调整，确保金额输入的合法性和正确性。