VueJS：有没有一种简单的方法可以基于服务器端的验证器在客户端验证电子邮件和密码？

Question

我是 VueJS 的新手。我正在创建注册和登录页面，用户应该将电子邮件和密码发送到后端（我使用的是 Django）以检查数据是否有效。如果其中之一无效，我想在表单上显示错误消息。

我看到了一些关于验证的文档，似乎我必须编写一堆验证代码。现在我想知道是否有一种简单的方法可以做到这一点。我想根据服务器端的验证器来验证它们。

Login.vue

export default {
data() {
    return {
        form: {
            email: '',
            password: '',
        }
    }
},
methods: {
    onSubmit(event) {
        event.preventDefault()

        // validate the inputs here and shows error messages if they are not valid

        const path = `http://127.0.0.1:8000/users/login/`
        axios.post(path, this.form).then((resp) => {
            location.href = '/'
        })
        .catch((err) => {
            console.log(err)
        })
    }
}

}

任何人都可以给我提示吗？

Answer 1

是的，这是您可以遵循的代码。在数据中制作一个像这样的 reg 对象。

data(){
        return{

            email:null,
            reg: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,24}))$/
        }
    },

然后在您的提交方法中添加

if(this.email == null || this.email == '')
{
  this.errorEmail = "Please Enter Email";
}
else if(!this.reg.test(this.email))
{
  this.errorEmail = "Please Enter Correct Email";
}