Vueでフォーム検証を使用する方法
序章
このような開発者は常にフォームの検証に取り組む必要があるため、ほとんどすべてのWebアプリケーションは何らかの方法でフォームを利用します。 あなたが新しい開発者である場合、これにどのようにアプローチするのが最善かを決めるのは難しいかもしれません。 使用しているスタックに応じて、選択できるオプションが多数あります。
このチュートリアルでは、Vueを使用してフォームにフォーム検証を実装する方法を学習します。
検証はクライアント側で行われるため、ユーザーが送信ボタンを押すとすぐにエラーメッセージを表示します(サーバーに応答を送信する必要はありません)。 クライアント側の検証を行っても、サーバーでリクエストを検証する必要がなくなるわけではありません。これも非常に重要です。
最初の例の作成
それが確立されたら、フォームを作成しましょう。 まず、AppコンポーネントはRegisterコンポーネントのみをレンダリングします。
<div id="app"> <div> <Register /> </div> </div>
スクリプトセクションは次のようになります。
new Vue({ el: "#app" })
Registerコンポーネントの場合、入力フィールドを持つフォームを表示します。
<div> <h2>Register</h2> <form @submit.prevent="register" method="post"> <div> <label>Name:</label> <input type="text" v-model="user.name" /> <div>{{ errors.name }}</div> </div> <div> <label>Phone:</label> <input type="text" v-model="user.phone" /> <div>{{ errors.phone }}</div> </div> <div> <label>Email:</label> <input type="text" v-model="user.email" /> <div>{{ errors.email }}</div> </div> <div> <label>Password:</label> <input type="password" v-model="user.password" /> <div>{{ errors.password }}</div> </div> <div> <button type="submit">Submit</button> </div> </form> </div>
.prevent
メソッドは、送信が行われたときにフォームのデフォルトの動作を停止するために使用されます。 フォームには、名前、電子メール、電話番号、およびパスワードの4つの入力フィールドがあります。 これらはすべて、独自の検証が必要になります。 いずれかの入力にエラーがある場合は、入力フィールドの下に表示されます。
各フィールドは一意であるため、検証がそれらの一意性と一致するように適合していることを確認する必要があります。 一般的なものは、どのフィールドも空であってはならないということです。 これは、!field.length
を使用して確認できます。ここで、field
は、入力フィールドのいずれかに相当します。 コードをクリーンに保つために、バリデーターはVueインスタンスの外部で定義されます。 Vue CLIを使用してスキャフォールディングされたアプリでこれを構築している場合は、別のファイルにバリデーターがあることを意味します。
const validateName = name => { if (!name.length) { return { valid: false, error: "This field is required" }; } return { valid: true, error: null }; }; const validatePhone = phone => { if (!phone.length) { return { valid: false, error: 'This field is required.' }; } if (!phone.match(/^[+][(]?[0-9]{1,3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,7}$/gm)) { return { valid: false, error: 'Please, enter a valid international phone number.' }; } return { valid: true, error: null }; } const validateEmail = email => { if (!email.length) { return { valid: false, error: "This field is required" }; } if (!email.match(/^\w+([.-]?\w+)_@\w+(_[_.-]?\w+)_(.\w{2,3})+$/)) { return { valid: false, error: "Please, enter a valid email." }; } return { valid: true, error: null }; }; const validatePassword = password => { if (!password.length) { return { valid: false, error: "This field is required" }; } if (password.length < 7) { return { valid: false, error: "Password is too short" }; } return { valid: true, error: null }; };
メールや電話番号などの固有のフィールドについては、正規表現を使用して特定のパターンに一致することを確認します。 各バリデーターは、入力フィールドをパラメーターとして受け取る関数です。 上からわかるように、各関数はvalid
とerror
を返します。 これは、フォームを送信する必要があるかどうかを判断するために使用するものです。 これが実際に動作していることを確認するために、Registerコンポーネントは次のようになります。
Vue.component('register', { template: '#register', data() { return { user: { email: '', password: '', name: '', phone: '' }, valid: true, success: false, errors: {}, message: null } }, methods: { register() { this.errors = {} const validName = validateName(this.user.name); this.errors.name = validName.error; if (this.valid) { this.valid = validName.valid } const validPhone = validatePhone(this.user.phone); this.errors.phone = validPhone.error; if (this.valid) { this.valid = validPhone.valid } const validEmail = validateEmail(this.user.email); this.errors.email = validEmail.error; if (this.valid) { this.valid = validEmail.valid } const validPassword = validatePassword(this.user.password) this.errors.password = validPassword.error if (this.valid) { this.valid = validPassword.valid } if (this.valid) { alert('HURRAAYYY!! :-)\n\n' + JSON.stringify(this.user)) } } } })
バリデーターがいずれかのフィールドに対してエラーを返した場合、返されたエラーはerrors.fieldName
に保存されます。ここで、fieldName
は入力フィールドの名前であり、ユーザーが何を確認できるように表示されます。間違えた。
すべてのフィールドがvalid
をtrue
として返したら、フォームの送信に進むことができます。 このチュートリアルでは、アラートボックスを表示しています。
ジョイを使う
Joiを使用すると、JavaScriptオブジェクトのスキーマを構築できます。これを使用して、入力を検証できます。 ExpressおよびRestifyを操作するときによく使用されます。 このチュートリアルでは、Registerコンポーネントのスキーマを定義することでこれを使用できます。
スキーマは次のとおりです。
import Joi from "joi"; const phoneRegex = /^[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,7}$/gm; const phone = Joi.string().regex(phoneRegex) .options({ language: { string: { regex: { base: 'must be a valid phone number' } } } }); const userValidation = {}; userValidation.create = { first_name: Joi.string().min(2).max(24).required(), email: Joi.string().email().required(), password: Joi.string().min(7).required(), phone: phone.required() };
次に、Registerコンポーネントのスキーマを使用して、ユーザーの入力を検証できます。
Vue.component('register', { template: '#register', data() { return { user: { name: '', email: '', password: '', phone: '' }, valid: false, success: false, errors: {}, issues: {} } }, methods: { // method that validates the user input using the schema validate(value, schema) { const result = Joi.validate(value, schema, { abortEarly: false }); if (result.error) { result.error.details.forEach((error) => { this.issues[error.path[0]] = error.message; }); return false; } return true; }, register() { // validation method is called and passed the inputs and schema this.validate(this.user, userValidation.create); if (Object.keys(this.issues).length > 0) { this.errors = this.issues; return false; } alert('HURRAAYYY!! :-)\n\n' + JSON.stringify(this.user)) } } })
ユーザー入力と定義したスキーマを受け入れるvalidate
メソッドを宣言します。 検証後にエラーが見つかった場合は、false
と発生したエラーを返します。 エラーがない場合は、以前と同じようにアラートボックスを表示します。
結論
VeeValidateとVuelidateは、Vueアプリケーションでフォーム検証を処理するときにも利用できる代替手段です。