如何在vue.js中验证密码和确认密码_Vue.js

如何在vue.js中验证密码和确认密码

vue.js

如何在vue.js中验证密码和确认密码,vue.js,Vue.js,在这里，我编写了一个vue.js代码，用于在字段为空且用户尝试提交表单及其工作正常时，将边框设置为“红色”。并且知道我正在尝试验证密码并确认密码。例如，如果用户尝试输入密码，如果密码与要求不匹配，则消息应显示为“必须输入至少八个字符”，如果用户在确认密码时输入密码，如果密码不匹配，则应显示“密码不匹配”。那么我们如何在vue.js中实现呢？请帮助我 <head> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.

在这里，我编写了一个vue.js代码，用于在字段为空且用户尝试提交表单及其工作正常时，将边框设置为“红色”。并且知道我正在尝试验证密码并确认密码。例如，如果用户尝试输入密码，如果密码与要求不匹配，则消息应显示为“必须输入至少八个字符”，如果用户在确认密码时输入密码，如果密码不匹配，则应显示“密码不匹配”。那么我们如何在vue.js中实现呢？请帮助我

<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js'></script>
<style scoped>
.invalid {
  border-color: red;
}
</style>
</head>

<body>

<div id="game">
<template id="myFormTemplate">
  <form @submit.prevent="submit" >
    <input name="name" v-model="name" :class="{ invalid: isSubmitting && !name.trim() }"/>
    <input name="age" v-model="age" :class="{ invalid: isSubmitting && !age.trim() }"/>
    <input name="password" v-model="password" :class="{ invalid: isSubmitting && !password.trim() }"/>
    <input name="cpassword" v-model="cpassword" :class="{ invalid: isSubmitting && !cpassword.trim() }"/>
    <input type="submit" />
  </form>
</template>
</div>


.无效{
边框颜色：红色；
}


新Vue({
el:'游戏'，
数据（）{
返回{
姓名：“，
密码：“”，
年龄：“，
注册会计师密码：“，
提交：错误，
};
模板：document.getElementById（“myFormTemplate”）
},
观察：{
密码（值）{
//将其绑定到电子邮件输入中的数据值
this.password=值；
此.validatePassword（值）；
},
方法：{
提交（）{
this.isSubmitting=true；
const formValid=[this.name，this.address，this.age，this.phone]
.map（（x）=>x.trim（））
.every（布尔值）；
如果（格式有效）{
控制台日志（“无效表单”）；
}否则{
控制台日志（“提交表格”）；
}
},
validatePassword（值）{
如果（/^（？=.[a-z]）（？=.[a-z]）（？=.[0-9]）（？=.[！@$%^&*））（？=.{8，}）/.test（值））
{
this.msg['password']=''；
}否则{
此.msg['password']='密码必须为8个字符，混合使用大写、小写、数字和特殊字符'；
} 
},
},
})

您尝试了什么？您共享的代码不包含您提到的逻辑。为什么要检查phone.trim（）和address.trim（）关于密码输入？除此之外，你想做的一个方法是观看

密码

，在那里进行检查并在那里设置

invalidPassword

变量。然后你可以使用它触发无效类。谢谢laerte。为了快速响应，实际上我已经给出了错误的输入，知道我已经更新了代码。因此，正如你建议使用watc她说：“我已经试过了，但是我仍然无法实现。请你给我一些提示。我已经更新了代码。请告诉我哪里出了问题。”

<script>
new Vue({
 el: '#game',
 data () {
   return {
     name: "",
      password: "",
      age: "",
      cpassword: "",
      isSubmitting: false,
   };
   template: document.getElementById("myFormTemplate")
 },
 watch: {
    password(value){
      // binding this to the data value in the email input
      this.password = value;
      this.validatePassword(value);
    },
 methods: {
    submit() {
      this.isSubmitting = true;

      const formValid = [this.name, this.address, this.age, this.phone]
        .map((x) => x.trim())
        .every(Boolean);

      if (formValid) {
        console.log("invalid form");
      } else {
        console.log("submitting form");
      }
    },
    validatePassword(value){
      if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test(value))
  {
    this.msg['password'] = '';
  } else{
    this.msg['password'] = 'Password must be 8 characters with mix of upper, lower case, numeric and special character';
  } 
    },
  },
})
</script>