如何在 React 中使用验证器显示无效的电子邮件消息

Question

我正在做一个 React 应用程序并安装了npm install validator 用于电子邮件验证，所以一切正常（如果电子邮件无效，数据不会发送到数据库），但我不知道如何显示用户输入无效电子邮件时的消息。谢谢大家！

这是我的电子邮件架构：

const validator = require('validator');

const EmailSchema = new mongoose.Schema({
    email: {
        type: String,
        trim: true,
        lowercase: true,
        unique: true,
        validate: {
            validator: validator.isEmail,
            message: 'Email is invalid',
            isAsync: false
        }
    },
    message: {
        type: String,
        require: true
    }
});

const Email = mongoose.model("Email", EmailSchema);
module.exports = Email;

这是我的表格：

<form className="feedback" onSubmit={sendEmail}>
    <h5>Leave us a feedback</h5>
    <div>
        <label>Email:</label>
        <input
            type="text"
            placeholder="Email"
            onChange={(event) => {
                setEmail(event.target.value);
            }}
            required
            className="input-email"
        />
    </div>
    <div>
        <label>Message:</label>
        <input
            type="text"
            placeholder="Your message here:..."
            onChange={(event) => {
                setMessage(event.target.value);
            }}
            required
            className="input-food"
        />
    </div>
    <button className="email-btn">Send Email</button>
</form>

Answer 1

const validator = require('validator');

const EmailSchema = new mongoose.Schema({
    email: {
        type: String,
        trim: true,
        lowercase: true,
        unique: true,
        validate: [ validator.isEmail, 'invalid email' ]
    },
    message: {
        type: String,
        require: true
    }
});

const Email = mongoose.model("Email", EmailSchema);
module.exports = Email;