Vue.jsでHTML5の標準バリデーション属性をバインドする方法 - カクカクしかじか

概要 HTML5の標準バリデーションのON / OFFをVue.jsのバインドで操作する方法が、明示的に記載されてる記事がネット上に見つからなかったのでここにメモしておきます📝 developer.mozilla.org やりたいこと 住所1(市区町村) と 住所2(番地・建物名) それぞれの入力欄があるフォームで 2つとも未入力の場合は有効だが、いずれかの入力があり、片方が未入力だった場合にバリデーションを発火させたい。 住所2(番地・建物名) に入力があった場合、 半角整数(0-9) か 全角整数(０-９) のパターンに当てはまる値が入っていないと無効な値として扱う。 やり方 ※CodePenに書いてるコードベースで説明します！ 住所1(市区町村) :required="!!番地" で 住所2(番地・建物名)の値が入力されていた場合のみ必須になるように required をバインド