Vuetify——校验密码和确认密码一致

<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) || "新密码与确认密码不一致"],
      },
	}
}

猜你喜欢

转载自blog.csdn.net/Kiruthika/article/details/121546058