やりたいこと
nuxt.jsでのメールアドレスとパスワードのバリデーション
vuelidateなどのバリデーション用のライブラリを使用せずに実装したい
コード
password.vue
<template>
<div class="#">
<div class="#">
<h2>
メール・パスワード変更
</h2>
</div>
<div class="#">
<div class="#">
<input
v-model="email"
type="text"
:notes="emailErrorText"
placeholder="メールアドレスを入力"
@input="validateEmail"
/>
<input
v-model="user.pastPassword"
:required="true"
type="password"
placeholder="現在のパスワードを入力"
/>
<input
v-model="user.password"
type="password"
:notes="passwordErrorText"
placeholder="新しいパスワードを入力"
@input="validatePassword"
/>
<input
v-model="user.password_confirmation"
type="password"
:notes="passwordConfirmationErrorText"
placeholder="新しいパスワードを入力"
@input="validatePasswordConfirmation"
/>
</div>
</div>
</div>
</template>
<script>
export default {
data: () => ({
user: {
pastPassword: '',
password: '',
password_confirmation: '',
},
email: '',
emailError: false,
passwordError: false,
passwordConfirmationError: false
}),
computed: {
emailErrorText () {
return this.emailError ? '無効なメールアドレスです' : '';
},
passwordErrorText () {
return this.passwordError ? '無効なパスワードです。半角英数字を含んで8-15文字の範囲内で入力してください。' : '半角英字と半角数字を含めた8-15文字以内';
},
passwordConfirmationErrorText () {
return this.passwordConfirmationError ? 'パスワードが一致していません' : '';
},
},
methods: {
validateEmail(email){
// emailの正規表現
const regexp = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/;
console.log(regexp.test(email));
regexp.test(email) ? this.emailError = false: this.emailError = true;
},
validatePassword(password){
// 半角英数字8-15文字の正規表現
const regexp = /^(?=.*?[a-z])(?=.*?\d)[a-z\d]{8,15}$/i;
regexp.test(password) ? this.passwordError = false : this.passwordError = true;
},
validatePasswordConfirmation(conf){
this.user.password === conf ? this.passwordConfirmationError = false : this.passwordConfirmationError = true;
}
}
};
</script>