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";
}