扩展 Vuetify 表单字段验证

让我们探索如何扩展 Vuetify的输入字段验证,以用默认值取代空的字段。

假设我们有一个带有某些值的表格,例如用户配置文件表格. 用户想要编辑其数据,然后删除其登录并移动到另一个字段,而不是实际上创建一个新的登录。

Alliator Credentials Empty credentials

Vue的双向绑定将我们的数据同步到输入中,我们现在有一个空白的登录字段,我们不希望这种行为在这里。

开始的

在真实的项目中,你可能会使用一个商店,但在这里我会使用一个简单的数据对象来保存值。

我們可以從Vuetify網站採取一個例子,並添加使用者對象:

 1<v-form>
 2  <v-text-field
 3    v-model='gator.login'
 4    label='Login'
 5    :rules='loginRules'
 6    required
 7  ></v-text-field>
 8  <v-text-field
 9    v-model='gator.email'
10    :rules='emailRules'
11    label='E-mail'
12    required
13  ></v-text-field>
14</v-form>

 1export default {
 2  data() {
 3    return {
 4      loginRules: [v => !!v || "The input is required"],
 5      emailRules: [
 6        v => !!v || "E-mail is required",
 7        v => /.+@.+/.test(v) || "E-mail must be valid"
 8      ],
 9      gator: {
10        login: "",
11        email: ""
12      }
13    };
14  },
15  mounted() {
16    this.gator.login = "crocodilian";
17    this.gator.email = "[email protected]";
18  }
19};

首先,创建一个对象来保存收集的数据并填写它:

 1export default {
 2  data() {
 3    return {
 4      currentGator: {
 5        login: null,
 6        email: null
 7      }
 8    };
 9  },
10  mounted() {
11    this.currentGator.login = this.gator.login;
12    this.currentGator.email = this.gator.email;
13  }
14};

让我们听取更改事件,并检查是否有一些值是空的. 由于我们有两个字段,请将字段名称输入为第二个参数:

 1<v-text-field
 2  v-model='gator.login'
 3  label='Login'
 4  :rules='loginRules'
 5  @change='checkEmpty($event, "login")'
 6  required
 7></v-text-field>
 8<v-text-field
 9  v-model='gator.email'
10  :rules='emailRules'
11  @change='checkEmpty($event, "email")'
12  label='E-mail'
13  required
14 ></v-text-field>

然后写出简单的checkEmpty方法:

1methods:{
2  checkEmpty(value, field){
3    if(!value.trim()){
4      this.gator[field] = this.currentGator[field];
5    }
6  }
7}

现在重要的字段永远都没有空,如果你需要添加一个字段,只需调用变更事件的方法并输入字段名称。

添加新入口

例如,以下是如何为 gator 和 currentGator 对象添加一个名称:

1<v-text-field
2  v-model='gator.name'
3  label='Name'
4  :rules='loginRules'
5  @change='checkEmpty($event, "name")'
6  required
7></v-text-field>

 1export default {
 2  data() {
 3    return {
 4      gator: {
 5        login: "",
 6        email: "",
 7        name: ""
 8      },
 9      currentGator: {
10        login: null,
11        name: null,
12        email: null
13      }
14    };
15  },
16  mounted() {
17    this.gator.name = "Cayman";
18    this.currentGator.name = this.gator.name;
19  }
20};