Element表单验证非0有效金额-自定义校验规则开发

最近同事反应一个页面的金额不能输入小数点，金额校验有问题,然后看了一下他原来的正则，发现匹配通过大于0的正整数，这可不行，真实的金额校验要追加到小数点后2位的，甚至非严谨模式"0.0"和"0.00"都是可输入的金额，只不过是无效金额而已！

废话不多说，先去element看了一下自定义校验写法:https://element.eleme.cn/#/zh-CN/component/form

官方写法:

1.自定义校验规则

var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
};

2.rules验证里添加

rules: {
  money: [
      { validator: validatePass, trigger: 'blur' }
  ],
}

这样就可以实现一个element自定义的验证规则. 回到正文,我们接下来要实现一个"验证非0有效金额"的自定义规则.
将上面的validatePass方法改成如下:

var validatePass = (rule, value, callback) => {
    if (Number(value) == 0) {
          callback(new Error('请输入有效金额！'));
    }else {
          let reg =/(^[1-9]{1}[0-9]*$)|(^[0-9]*\.[0-9]{2}$)/;
          if(!reg.test(value)){
          callback(new Error('请输入有效金额！'));
          }else{
          callback();
          }
     }
};

规则里不做改动,还是失去焦点之后触发校验规则.这样就是实现了非0有效金额值的校验.当然你如果是正则大佬,完全可以将上面的代码重新加入非0的校验即可!