在 vuejs 中使用 vuelidate 验证密码? [英] Password validate with vuelidate in vuejs?

问题描述

我从 如何使用 Vuelidate 验证密码?

 验证:{用户:{需要密码，包含大写:函数(值){返回/[A-Z]/.test(value)},包含小写:函数(值){返回/[a-z]/.test(value)},containsNumber:函数(值){返回/[0-9]/.test(value)},包含特殊:函数(值){return/[#?!@$%^&*-]/.test(value)},minLength: minLength(8),maxLength: maxLength(19) },确认密码:{ 需要，sameAsPassword:sameAs("password") },},}

如何使用 vuelidate 验证密码，我在validationStatus 中有正则表达式值，点击按钮单击如何检查正则表达式验证.

尝试使用正则表达式验证密码是否成功，移动到下一个屏幕，直到成功他需要留在当前屏幕.

解决方案

尝试以下步骤来解决问题

第 1 步:validations 修改如下

验证:{用户:{需要密码，有效:函数(值){const containsUppercase =/[A-Z]/.test(value)const containsLowercase =/[a-z]/.test(value)const containsNumber =/[0-9]/.test(value)const containsSpecial =/[#?!@$%^&*-]/.test(value)返回 containsUppercase &&包含小写 &&containsNumber &&包含特殊},minLength: minLength(9),最大长度:最大长度(19)，},ConfirmPassword: { required, sameAsPassword: sameAs("password") },},},

第2步:RegisterMe按钮点击事件

方法:{注册我(){this.submitted = true;this.$v.$touch();如果 (this.$v.$invalid) {返回假；//如果表单无效则停止} 别的 {警报(表格有效.移动到下一个屏幕")；}},},

第三步:compute函数禁用Register按钮

计算:{被禁用() {返回 this.$v.$invalid;},},

第 4 步:HTML 模板就像

<div class="form-group"><输入类型=密码"类=表单控制"占位符=输入密码"值="v-model="user.password";自动完成=关闭"/>
<span v-if="!$v.user.password.required">需要密码</span><span v-if="user.password &&!$v.user.password.valid">密码包含至少一个大写、一个小写、一个数字和一个特殊字符</span><span v-if="user.password &&$v.user.password.valid &&!$v.user.password.minLength">密码必须至少为 9 个字符</span><span v-if="user.password &&!$v.user.password.maxLength">密码不得超过 19 个字符</span>

<div class="form-group"><输入类型=密码"类=表单控制"placeholder="确认密码";值="v-model="user.confirmPassword";自动完成=关闭"/>

演示

I got the reference from How to validate password with Vuelidate?

 validations: {

    user: {
      password: { required, 
        containsUppercase: function(value) {
          return /[A-Z]/.test(value)
        },
        containsLowercase: function(value) {
          return /[a-z]/.test(value)
        },
        containsNumber: function(value) {
          return /[0-9]/.test(value)
        },
        containsSpecial: function(value) {
          return /[#?!@$%^&*-]/.test(value)
        },
        
        
        minLength: minLength(8),maxLength: maxLength(19) },
      confirmPassword: { required, sameAsPassword: sameAs("password") },
    }, 
    }

<input
                  :type="passwordFieldType"
                  v-model="user.password"
                  v-model.trim="$v.user.password.$model"
                  id="password"
                  name="password"
                  class="input-section-three-login"
                  :class="{'is-invalid': validationStatus($v.user.password) }"                  
                  placeholder="Enter new password"
                  :maxlength="maxpassword" 
                  v-on:keypress="isPassword($event)"

                />
                
                
 <button v-on:click="registerMe" :disabled="user.confirmPassword != user.password   " :class="(isDisabled) ? '' : 'selected'" > Register
</button>

How to validate the password with vuelidate, i am having regex value in validationStatus and on button click how to check the regex validation.

Trying for if password is validated success with regex validation, move to next screen else till success he need to stay in current screen.

解决方案

Try below steps to resolve the issue

Step 1: validations modified like below

validations: {
user: {
  password: { required, 
    valid: function(value) {
      const containsUppercase = /[A-Z]/.test(value)
      const containsLowercase = /[a-z]/.test(value)
      const containsNumber = /[0-9]/.test(value)
      const containsSpecial = /[#?!@$%^&*-]/.test(value)
      return containsUppercase && containsLowercase && containsNumber && containsSpecial
    },
    minLength: minLength(9),
    maxLength: maxLength(19),
  },
  confirmPassword: { required, sameAsPassword: sameAs("password") },
},
},

Step 2: RegisterMe button click event

methods: {
registerMe() {
  this.submitted = true;
  this.$v.$touch();
  if (this.$v.$invalid) {
    return false; // stop here if form is invalid
  } else {
    alert("Form Valid. Move to next screen");
  }
},
},

Step 3: compute function to disable Register button

computed: {
isDisabled() {
  return this.$v.$invalid;
},
},

Step 4: HTML template be like

<form @submit.prevent="registerMe" novalidate>
  <div class="form-group">
    <input
      type="password"
      class="form-control"
      placeholder="Enter Password"
      value=""
      v-model="user.password"
      autocomplete="off"
    />
    <div
      v-if="this.submitted && $v.user.password.$error"
      class="invalid-feedback left">
      <span v-if="!$v.user.password.required">Password is required</span>
      <span v-if="user.password && !$v.user.password.valid">Password contains atleast One Uppercase, One Lowercase, One Number and One Special Chacter</span>
      <span v-if="user.password && $v.user.password.valid && !$v.user.password.minLength">Password must be minimum 9 characters</span>
      <span v-if="user.password && !$v.user.password.maxLength">Password must be maximum 19 characters</span>
    </div>
  </div>
  <div class="form-group">
    <input
      type="password"
      class="form-control"
      placeholder="Confirm Password"
      value=""
      v-model="user.confirmPassword"
      autocomplete="off"
    />
    <div
      v-if="this.submitted && $v.user.confirmPassword.$error"
      class="invalid-feedback left"
    >
      <span v-if="!$v.user.confirmPassword.required"
        >Confirm Password is required</span
      >
      <span
        v-if="
          user.confirmPassword && !$v.user.confirmPassword.sameAsPassword
        "
        >Password and Confirm Password should match</span
      >
    </div>
  </div>
  <input
    type="submit"
    class="btnRegister"
    value="Register"
    :disabled="this.isDisabled"
  />
</form>

DEMO

这篇关于在 vuejs 中使用 vuelidate 验证密码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！