Не может отправить данные в API, только если форма проходит необходимые проверки в vuejs

Это мой HTML-файл, который имеет форму регистрации:

<input type = "text" name = "usernamedata" 
placeholder = "Example@scio.com" class = "inputusername" v-validate="'required|min:4|max:16'" 
data-vv-validate-on="blur" 
v-model="enter_details.username">
<span class="error-msg" v-show="errors.has('usernamedata')">
Please Enter a valid username
</span>

<input type = "email" name = "emaildata" 
placeholder = "Example@scio.com" 
class = "class2input" v-validate="'required|email'" 
data-vv-validate-on="blur" v-model="enter_details.email">
<span class="error-msg" v-show="errors.has('emaildata')">
Please enter a valid email</span>

<input type = "text" name = "firstnamedata" placeholder = "First Name" 
class = "class2input" v-validate="'required|alpha'" data-vv-validate-on="blur" v-model="enter_details.firstName">
<span class="error-msg" v-show="errors.has('firstnamedata')">
Firstname can only have alphabets,and must not be empty
</span>

<input type = "text" name = "lastnamedata" 
 placeholder = "Last Name" 
 class = "class2input" v-validate="'alpha'" 
 data-vv-validate-on="blur" v-model="enter_details.lastName">
 <span class="error-msg" v-show="errors.has('lastnamedata')">
 Last name should be in alphabets only</span>

<input type = "password" name = "passworddata" 
placeholder = "Password" class = "class2input" 
style="margin-bottom: 15px"  
v-validate="{ required: true, regex: /^(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9!@#$%^&*]{8,16}$/ }" data-vv-validate-on="blur" v-model="enter_details.password">
 <span class="error-msg" v-show="errors.has('passworddata')">
Password must contain one lower case letter, 
one uppercase letter, one number, one special 
character out of !@#$%^&* and length must be from 8 to 16
</span>

<input type = "password" name = "repeatpassworddata" 
placeholder = "Repeat Password"  class = "class2input"
 v-validate="'required|confirmed:passworddata'" 
data-vv-validate-on="blur" v-model="enter_details.repeat_password">
 <span class="error-msg" v-show="errors.has('repeatpassworddata')">
It must be same as the password
</span>

Это моя кнопка отправки, где есть функция, которая будет вызываться при нажатии:

<div class="signupbutton">
 <button type = "button" class="button-style" @click="signupMethod">Sign Up</button>
</div>

Это мой файл signupform.js, где яsignupMethod'который объявляет валидации в полной форме, здесь я пытаюсь отправить данные в API, только если все валидации выполнены, и если нет, то появляется ошибка в консоли, но в моем состоянии, даже если форма заполнена по-прежнему он печатает неверные данные в консоли.

signupMethod: function () {
      const validator = new Validator({
        firstName : 'required|alpha',
        lastName: 'alpha',
        email : 'required|email',
        contact_number : 'required',
        password: { required: true, regex: /^(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9!@#$%^&*]{8,16}$/ },
        username :'required|min:4|max:16',
        contactNumber : 'required',
      })
      validator.validateAll({
        firstName: this.firstName,
        lastName : this.lastName,
        email : this.email,
        contactNumber : this.contactNumber,
        username : this.username,
        password : this.password,
        countryCode: this.countryCode,
        dob : this.dob,
      }).then((res) => {
        console.log(res)
        if(res) {
          const signupObj = {
            username: this.enter_details.username,
            email: this.enter_details.email,
            contactNumber: this.enter_details.contactNumber,
            firstName: this.enter_details.firstName,
            lastName: this.enter_details.lastName,
            dob: this.enter_details.dob,
            password: this.enter_details.password,
            countryCode: this.enter_details.countryCode
          }

          this.$store.dispatch('signupUser', signupObj).then(() => {
            this.$router.push('/mistrecord')
          })
        }
        else
        console.log("invalid data ")
      })
    },

Я становлюсь недействительным в обоих случаях, когда я правильно заполняю форму, а также когда я не заполняю форму в соответствии с проверками.

0 ответов

Другие вопросы по тегам