async-validator的官方文檔,真真"通俗易懂"。
為自己以後快速使用,這邊寫了個簡單使用方法。
校驗單個表單元素
先看demo:
<template lang="pug">
div
input(v-model="title" @input="validateValue")
div(v-if="errorMessage") {{errorMessage}}
</template>
<script>
import Schema from "async-validator";
// 自定義規則函數的模板
const validateData = (rule, value, callback) => {
let errorMessage;
if (value === "壞蛋") {
errorMessage = "請文明用語";
}
callback(errorMessage);
};
export default {
data() {
return {
config: {
modelKey: "title",
label: "標題",
rule: [
{ required: true, message: "標題不能為空" },
{ min: 3, message: "長度最小是3" },
{ max: 6, message: "長度最大是6" },
validateData
]
},
title: "",
errorMessage: ""
};
},
methods: {
// 封裝 校驗單個表單元素的值是否有效。參數:單個表單元素的配置、表單元素的value
// 返回值是promise類型, {isValid:true,errorMessages:["xx","ddd"]}
validateFormItem(config, value) {
// 獲取綁定的是什麼屬性
const { modelKey, rule } = config;
// 1. 通過描述信息創建一個骨架
const schema = new Schema({ [modelKey]: rule });
// 2. 將結果扔出去
return new Promise(resolve => {
schema.validate({ [modelKey]: value }, err => {
// 沒有錯誤,就説明是有效值
if (!err) {
resolve({ isValid: true });
return;
}
// 錯誤的話,拿到所有的錯誤信息列表
let errorMessages = err.map(item => item.message);
resolve({ isValid: false, errorMessages });
});
});
},
// 使用校驗
async validateValue() {
// 異步方法
const { isValid, errorMessages } = await this.validateFormItem(
this.config,
this.title
);
if (isValid) {
this.errorMessage = "";
return;
}
// 有錯誤的話 顯示所有錯誤信息
this.errorMessage = errorMessages.join(" / ");
}
}
};
</script>
複製代碼
使用方法:
- 用描述信息創建Schema實例
schema.validate
是一個異步操作,這邊用promise
rule
規則裏,可以使用官方自帶的一些校驗規則,也可以寫個自定義規則的函數
校驗整個表單
還是先看demo:
<template lang="pug">
form
div(v-for="(config,index) in configs" :key="index")
label {{config.label}}
input(v-model="formData[config.modelKey]" @input="validateValue(config)")
span(v-if="config.errorMessage" style="color:'red'") {{config.errorMessage}}
button(@click.stop="submit") 點擊提交
</template>
<script>
import Schema from "async-validator";
const validateData = ...
export default {
data() {
return {
formData: {
title: "",
content: ""
},
configs: [
{
modelKey: "title",
label: "標題",
rule: [
{ required: true, message: "標題不能為空" },
{ min: 3, message: "長度最小是3" },
{ max: 6, message: "長度最大是6" },
validateData
],
errorMessage: ""
},
{
modelKey: "content",
label: "內容",
rule: [{ required: true, message: "內容不能為空" }],
errorMessage: ""
}
]
};
},
methods: {
validateFormItem(config, value) {...}
async validateValue(config) {
// 異步方法
const { isValid, errorMessages } = await this.validateFormItem(
config,
this.formData[config.modelKey]
);
if (isValid) {
config.errorMessage = "";
return;
}
// 有錯誤的話 顯示所有錯誤信息
config.errorMessage = errorMessages.join(" / ");
},
submit() {
const isOk = this.configs.every(item => !item.errorMessage);
alert(isOk ? "提交成功" : "不符合規範喲");
}
}
};
</script>
複製代碼
這裏其實就是通過配置的形式,簡單實現了表單的驗證。