「バリテーション機能付き入力フォームを作成しよう | Create an input form with validation function using Vue.js 」

バリテーションとはフォームなどに入力された値が、決められた規則に則っているかどうかを検証することです。| Validation is to verify whether the value entered in the form etc. complies with the set rules.

　　

HTML

<div id=”app”>
<div class=”form-area__name”>
<p>名前</p>
<input
type=”text”
name=”name”
v-model=”name”
/>
<p
v-if=”isInValidName”
class=”error”
>名前は４文字以上で入力してください</p>
</div>
<div class=”form-area__tel”>
<p>電話番号</p>
<input
type=”tel”
name=”tel”
v-model=”tel”
/>
<p
v-if=”isInValidTel”
class=”error”
>電話番号は数字８文字以上で入力してください</p>
</div>
<div class=”form-area__email”>
<p>Eメールアドレス</p>
<input
type=”text”
name=”email”
v-model=”email”
/>
<p
v-if=”isInValidEmail”
class=”error”
>Eメールアドレスの形式で入力してください</p>
</div>

Javascript

new Vue({
el: ‘#app’,
data() {
return {
name: ‘name’,
email: ‘email’,
tel: ’00’
};
},
computed: {
isInValidName() {
return this.name.length < 4;
},
isInValidEmail() {
const regex = new RegExp(/^[-a-z0-9~!$%^&*_=+}{\’?]+(\.[-a-z0-9~!$%^&*_=+}{\’?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i) return !regex.test(this.email);
},
isInValidTel() {
const tel = this.tel;
const isErr = tel.length < 8 || isNaN(Number(tel));
return isErr;
}
}
});

　　　

CSS

.error {
color: #e74c3c;
}

わからないことはプロフェッショナルから学ぶのが一番