這是代碼沙盒示例 (Svelte) 的鏈接。它代表了一個被驗證的微不足道的暫存器Joi。我面臨的問題是清除 Joi 驗證錯誤訊息。我將它們記錄在errors物件中，由輸入名稱 ( email, password, passwordConfirm) 命名的鍵。
驗證通過附加到表單的函式進行on:input
const validate = async e => {
const fields = { [e.target.name]: e.target.value };
try {
errors[Object.keys(fields)[0]] = null;
await registerSchema.validateAsync(
{ ...fields },
{ abortEarly: false, allowUnknown: true }
);
} catch (err) {
errors[Object.keys(fields)[0]] = err;
}
};
它很粗糙，但主要是有效的。它可以清除email和password錯誤，但無論我做什么都會passwordConfirm堅持。
我認為問題不在于我的 Joi 架構：
export const registerSchema = Joi.object({
email: Joi.string().email({ tlds: { allow: false } }),
password: Joi.string().pattern(new RegExp("^[a-zA-Z0-9]{6,30}$")).trim(),
passwordConfirm: Joi.string().valid(Joi.ref("password")).trim()
});
我很確定這個錯誤隱藏在validate函式本身的某個地方，但是——為了我的死——我能找到它。我會很感激這里的一些提示。
同樣，可以在代碼沙箱上看到示例。
uj5u.com熱心網友回復：
您的問題確實出在您的驗證功能中。當你構建你的fields物件時，你添加到它的唯一鍵是當前活動的輸入：
const fields = { [e.target.name]: e.target.value };，這意味著當你在你的模式中比較時passwordConfirm，Joi.ref('password')后者總是一個空值，因為password在被驗證的物件中沒有鍵！
解決此問題的一種（粗略）方法是確保password在活動輸入為時將欄位傳遞到正在驗證的物件中passwordConfirm：
const validate = async e => {
const fields = { [e.target.name]: e.target.value };
if (e.target.name === 'passwordConfirm') {
fields.password = password;
}
// console.log(fields); // log object being validated
try {
errors[Object.keys(fields)[0]] = null;
await registerSchema.validateAsync(
{ ...fields },
{ abortEarly: false, allowUnknown: true }
);
} catch (err) {
errors[Object.keys(fields)[0]] = err;
}
};
在您的 CodeSandbox 中進行了測驗，并且似乎按預期作業。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/440207.html
標籤：javascript 验证 苗条 乔伊
上一篇：如何將新物件作為值放入陣列中？
下一篇：“組件已定義但從未使用”