我已经开始为我的代码进行一些验证，并使用文档示例作为我工作的基础。

我想为用户添加一些验证，而不仅仅是在填写表单时键入空格。文档处理“没有空格”，但是，您根本无法键入任何空格... 我希望对其进行修改，以便验证允许一个空格，以便可以键入适当的名称。

这是文档中的密码笔：https://codepen.io/pen/?&editable=true&editors=101

我的模板：

<div id="app">
  <v-app id="inspire">
    <v-form
      ref="form"
      v-model="valid"
      lazy-validation
    >
      <v-text-field
        v-model="name"
        :counter="10"
        :rules="nameRules"
        label="Name"
        required
      ></v-text-field>

      <v-text-field
        v-model="email"
        :rules="emailRules"
        label="E-mail"
        required
      ></v-text-field>

      <v-select
        v-model="select"
        :items="items"
        :rules="[v => !!v || 'Item is required']"
        label="Item"
        required
      ></v-select>

      <v-checkbox
        v-model="checkbox"
        :rules="[v => !!v || 'You must agree to continue!']"
        label="Do you agree?"
        required
      ></v-checkbox>

      <v-btn
        :disabled="!valid"
        color="success"
        class="mr-4"
        @click="validate"
      >
        Validate
      </v-btn>

      <v-btn
        color="error"
        class="mr-4"
        @click="reset"
      >
        Reset Form
      </v-btn>

      <v-btn
        color="warning"
        @click="resetValidation"
      >
        Reset Validation
      </v-btn>
    </v-form>
  </v-app>
</div>

我的脚本：

new Vue({
  el: '#app',vuetify: new Vuetify(),data: () => ({
    allowSpaces: false,match: 'Foobar',max: 0,model: 'Foobar',}),computed: {
    rules () {
      const rules = []

      if (this.max) {
        const rule =
          v => (v || '').length <= this.max ||
            `A maximum of ${this.max} characters is allowed`

        rules.push(rule)
      }

      if (!this.allowSpaces) {
        const rule =
          v => (v || '').indexOf(' ') < 0 ||
            'No spaces are allowed'

        rules.push(rule)
      }

      if (this.match) {
        const rule =
          v => (!!v && v) === this.match ||
            'Values do not match'

        rules.push(rule)
      }

      return rules
    },},watch: {
    match: 'validateField',max: 'validateField',model: 'validateField',methods: {
    validateField () {
      this.$refs.form.validate()
    },})

有什么想法吗？