时间戳

首页 > 解决方案 > VueJS：有没有一种简单的方法可以根据服务器端的验证器在客户端验证电子邮件和密码？

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

问题描述

我是 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)
        })
    }
}

}

谁能给我提示？

标签： validationvue.jsvuejs2

解决方案

是的，这是您可以遵循的代码。在数据中创建一个像这样的 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";
}

推荐阅读