概要
Vue.js(Element (Element UI))を使用している場合に「async-validator」単体で使う実装方法例を少々
インストール（npm）
npm i async-validator
※筆者はElement (Element UI)（Vue.jsのコンポーネントライブラリ）を使用しているので別途インストールしなくても使える状況ですので単体でインストールしたことはないです
実装例
簡単なアカウント登録画面の例として以下のように実装してみました
form.vue
<template>
<div class="form">
<div class="text-center">アカウント登録</div>
<input type="email" v-model="ruleForm.email" placeholder="メールアドレス*">
<input type="password" v-model="ruleForm.password" placeholder="パスワード*">
<input type="password" v-model="ruleForm.passwordConf" placeholder="パスワード（確認）*">
<div class="text-center">
<input type="button" @click="beforeSubmit" value="登録">
</div>
</div>
</template>
<script>
import schema from 'async-validator';
export default {
data() {
// カスタムバリデーション定義する場合はここに記述
var validatePasswordConf = (rule, value, callback) => {
if (value === '') {
callback(new Error('パスワード（確認）を入力してください。'));
} else if (value !== this.ruleForm.password) {
callback(new Error('二つのパスワードが異なります。'));
}
callback();
};
return {
// フォーム用変数
ruleForm: {
email: '',
password: '',
passwordConf: '',
},
// バリデーションルール定義（項目毎）
rules: {
email: [
{ required: true, message: 'メールアドレスを入力してください。', trigger: 'blur' },
{ type: "email", message: '正しいメールアドレスを入力してください。', trigger: 'blur' },
{ min: 1, max: 255, message: '1文字以上255文字以内で入力してください。', trigger: 'blur' }
],
password: [
{ required: true, message: 'パスワードを入力してください。', trigger: 'blur' },
{ min: 1, max: 50, message: '1文字以上50文字以内で入力してください。', trigger: 'blur' }
],
passwordConf: [
// 上記で定義したカスタムバリデーションを使用
{ validator: validatePasswordConf, trigger: 'blur' }
],
},
}
},
methods: {
beforeSubmit() {
var validator = new schema(this.rules);
validator.validate(this.ruleForm, (errors, fields) => {
if(errors) {
// バリデーションエラー時
return alert(errors[0]["message"]);
}
// バリデーションパス
return alert("登録しました");
});
},
}
}
</script>
バリデーションのルール詳細は「async-validator」のREADMEとかを参考にしてください。