使用模 11 掩码验证文本输入掩码（智利车辙）

Question

有什么方法可以使用 vuetify 输入进行更高级的掩码使用（动态掩码）"mask" 属性？

目前他们支持非常简单的预定义掩码，例如信用卡或 phone 号码。但是 Chilean Rut（或任何 Modulo 11 验证）掩码是基于用户输入的动态

检查 Here 模 11 的工作原理。

Answer 1

在玩弄掩码后，我发现你可以为它传递一个计算值，所以每当输入值改变时，掩码也会改变。

new Vue({
  el: '#app',
  data: () => ({
    value: '20290324K'
  }),
  computed: {
    mask() {
      const $this = this
      const chars = this.value.split('');
      const charsWithoutValidator = this.value.substr(0, this.value.length - 1).split('')
      let currentValidator = 11 - charsWithoutValidator.reverse().reduce((sum,el,i) => sum += el * (i % 6 + 2), 0) % 11;
      currentValidator = currentValidator == 10 ? 'N' : '#';
      let nextValidator = 11 - chars.reverse().reduce((sum,el,i) => sum += el * (i % 6 + 2), 0) % 11;
      nextValidator = nextValidator == 10 ? 'N' : '#';
      const mask = charsWithoutValidator.reverse().map((char, i) => {
        if (i % 3 === 0 && i !== 0) {
          return '#.'
        }
        return '#'
      }).reverse().join('');
      return `${mask}-${currentValidator}${nextValidator}`; // ad an extra char at the end to be able to type.
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" />
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-card>
      <v-card-text>
      </v-card-text>
      <v-card-text>
        <v-text-field v-model="value" :mask="mask" label="Value" validate-on-blur
></v-text-field>
      </v-card-text>
    </v-card>
  </v-app>
</div>

使用模 11 掩码验证文本输入掩码（智利车辙）

Vuetify text input mask using modulo 11 mask (chilean rut)

vue.js

vuetify.js

modulo