cube-ui form控件input增長金錢規則

前言

由於rules類型只有 'string', 'number', 'array', 'date', 'email', 'tel', 'url',沒有支持金錢類型。用number 的話沒有精度，因此通常不適用，那隻能看官方文檔來本身添加一種規則 官方文檔

添加規則

import Vue from 'vue'
// 固然這裏還有一些其它組件的引入我只是舉個例子
import { Validator } from 'cube-ui'
Vue.use(Validator)
Validator.addRule('money', (val, config, type) => typeof !config && /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/i.test(val))
Validator.addMessage('money', '請輸入正確的金錢格式，精確到分')
複製代碼

金錢匹配正則

正則我是網上看博客隨便找的，只是爲了測試一下。

/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
複製代碼

ps : 推薦一個比較好用的網站，來檢驗正則顯示

使用

fields: [
        {
          type: 'input',
          modelKey: 'money',
          label: '充值金額',
          props: {
            placeholder: '請輸入充值金額'
          },
          rules: {
            required: true,
            type: 'number',
            min: 0,
            money: true
          }
        }
      ]
複製代碼

效果

總結

由於正則沒有匹配 - 符號，因此我先把min的規則放在money以前，否則會先提示money的提示語，只是一個簡單的例子。有不足的地方歡迎指正~謝謝。