Vuetify表单校验

用Vuetify做表单校验,

Vuelidate

https://github.com/vuelidate/vuelidate
yarn add vuelidate

校验表单必须为12位Hex

<template>
	<v-text-field
	    v-model="formData.tagId"
        label="Tag ID"
        :rules="tagIdRules"
	></v-text-field>
</template>
<script>
export default {
  name: "AssetFormDialog",
  props: { show: Boolean, formData: Object },
  data() {
    return {
      tagIdRules: [
        (v) => {
          if (v.length != 0) {
            let r = /^[0-9a-f]{12}$/;
            if (!r.test(v)) {
              return "Tag ID format is invalid!";
            }
          }
          return true;
        },
      ],
    };
  },
  methods: {
  },
};
</script>
上一篇:RxJS简介


下一篇:前端框架:Vuetify:从零开始安装Vuetify