<v-form v-model="valid" ref="form">
<v-row no-gutters dense>
<v-col cols="3" class="mt-2">
<v-subheader
><span class="red--text">*</span>
{
{
$t("account.label.new_password") }}</v-subheader
>
</v-col>
<v-col cols="9">
<v-text-field
rows="1"
v-model="new_password"
:placeholder="$t('account.placeholder.new_password')"
:hint="$t('account.hint.password')"
persistent-hint
type="password"
required
:rules="rules.ispassword"
style="margin-left:6px;"
></v-text-field>
</v-col>
</v-row>
<v-row no-gutters dense>
<v-col cols="3" class="mt-2">
<v-subheader
><span class="red--text">*</span>
{
{
$t("account.label.confirm_password") }}</v-subheader
>
</v-col>
<v-col cols="9">
<v-text-field
rows="1"
v-model="confirm_password"
:placeholder="$t('account.placeholder.confirm_password')"
:hint="$t('account.hint.confirm_password')"
persistent-hint
type="password"
required
:rules="rules.isconfirm"
style="margin-left:6px;"
></v-text-field>
</v-col>
</v-row>
</v-form>
export default{
let isPassword = (value) => {
let reg = /^(?![A-z0-9]+$)(?=.[^%&',;=?$\x22])(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{
8,20}$/;
return reg.test(value);
};
let isConfirmPassword = (value) => {
return this.new_password === value;
};
data(){
valid: true,
new_password: null,
confirm_password: null,
rules: {
notNullRules: [(v) => !!v || "此项为必填项"],
ispassword: [(v) => isPassword(v) ||"密码至少包含大小写字母+数字+特殊字符; 长度至少8位,最多20位。"],
isconfirm: [(v) => isConfirmPassword(v) || "新密码与确认密码不一致"],
},
}
}
Vuetify——校验密码和确认密码一致
Guess you like
Origin blog.csdn.net/Kiruthika/article/details/121546058
Recommended
Ranking