尝试以下步骤来解决问题
Step 1: validations
修改如下
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
按钮点击事件
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
禁用功能Register
button
computed: {
isDisabled() {
return this.$v.$invalid;
},
},
第 4 步:HTML 模板如下
<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 https://codesandbox.io/s/dank-worker-vkfix