如何配置Vue+Vuetify输入验证规则：允许空字符串或5位字符

要实现输入为空字符串（或全空格） 或 恰好5个字符 的验证规则，只需调整codeRules的判断逻辑，把空值的合法情况加入条件即可：

修改后的验证规则 #

原规则仅校验了5字符的情况，补充空值判断后：

rules: {
  codeRules: (v) => {
    const trimmedVal = (v ?? "").trim()
    // 两种合法情况：trim后为空 或者 长度恰好为5
    return trimmedVal.length === 0 || trimmedVal.length === 5 || "code must be 5 characters or empty!"
  }
}

完整代码示例 #

new Vue({
  el: '#app',
 data: () => ({
   code:"",
   rules: {
        codeRules: (v) => {
          const trimmedVal = (v ?? "").trim()
          return trimmedVal.length === 0 || trimmedVal.length === 5 || "code must be 5 characters or empty!"
        }
   }
 }),
 methods: {
    checkCode(){
      if (this.$refs.form.validate()) {
          alert('Everything goes well!')
      }
    }
 }
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <v-form ref="form" lazy-validation>
      <v-container bg fill-height grid-list-md text-xs-center>
         <v-row>
            <v-col cols="6">
              <v-text-field
                label="Code"
                v-model="code"
                :rules="[rules.codeRules]"
              ></v-text-field>
            </v-col>
         </v-row>
         <v-row>
            <v-col cols="6">
              <v-btn color="blue darken-1" @click="checkCode">Ok
          </v-btn>
            </v-col>
         </v-row>
      </v-container>
    </v-form>
  </v-app>
</div>

逻辑说明 #

• 先对输入值做trim()处理，确保全空格的输入也被视为“空”的合法情况
• 当输入满足trim后长度为0或trim后长度为5时，验证通过；否则返回错误提示
• Vuetify的验证规则逻辑：返回true表示验证通过，返回字符串表示验证失败并显示该错误信息

内容的提问来源于stack exchange，提问作者TAHER El Mehdi