updated: 2021/4/27
環境）
vue@2.6.12
vuetify@2.3.18
vuex@3.5.1
vuetifyのv-textfieldを使って電話番号のフォームvalidationを実装する
フォームのフィールドは電話番号全体で一つとするのではなく、ハイフンで区切って3つのフィールドを持つものとする。
v-textfieldを使った場合,
valueはNumber, strどちらでも指定で出来る
valueにNumberをパスした場合、入力前はNumber、入力後はvalueはstrとして処理される。
validationは数値をパスされた場合を考慮してString(v)または、v.toString()をしたほうが良い。(フィールドにstringとnumberの両方を想定している場合)
valueをあらかじめStringに変換しようとするとdataであれば値が空でも機能するがvuexを使用した場合undefinedとなってしまう。
type="number"を指定すると半角英数字しか入力を受け付けなくなる。この時、validation時はstringとして認識され、v.lengthが機能する。
value（電話番号等ユーザー情報）はデータとしてコンポーネントが単独で保持する場合は少なくvuex stateで管理することが想定される。
computed: {
}
rules: {
}
フィールドがrequiredの場合は
[
v => (!v || v.length < 6) || "有効な電話番号を入力してください",
v => !!v || "入力必須の項目です"
]
また、フィールドをまたいだvalidationはvutifyでは無いため、3つのフィールドが入力された場合submit可能にするといったvalidationは別途作成する必要がある。
以下、フォーム内のフィールドが入力済みになり、かつinputに変更があった場合のみsubmit可とするvalidation
submitボタンをフィールドがそろわない場合disableにする。
<v-btn :disabled="!submitReady">Submit</v-btn>
computed: {
submitReady() {
if(!this.valid) {
return false
} else if(!this.editted) {
return false
} else {
return true
}
}
}
// this.validは上述のrulesがvalidであるか、this.edittedはこれから新たに定義するvalidationのパラメータ
@input="userSettingEditted('phoneNumber' , form.phoneNumber.key, form.phoneNumber.value)"
フィールドに値が入力されるlazyValueに値が挿入されるので値があるか確認
v-textfieldをv-forを使わないとrefを配列形式で取得できないためrefs.someが使えなくなる。
値の有無の判断を簡単にするため、textfieldはv-forを使う。
ref)
