vue实现简易的密码和确认密码

使用vue3+ts vantUI库

修改密码或注册的时候都需要确认密码 如果不一致出现提示

实现效果如下

    <div class="page">
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="pwd" :type="password_eye ? 'text' : 'password'" name="password" maxlength="16" clearable
                    label="密码" placeholder="请输入密码" :right-icon="password_eye ? 'eye-o' : 'closed-eye'"
                    :right-icon-class="password_eye ? 'van-icon-eye-o' : 'van-icon-closed-eye'"
                    @click-right-icon="password_fn" :rules="[
                        { required: true, message: '密码不能为空' },
                        { pattern: /^(?=.*[a-zA-Z])(?=.*\d).{6,12}$/, message: '密码必须包含数字和字母或6-12位' },
                        confirmPasswordRule
                    ]"/>
                <van-field v-model="confirmPassword" :type="password_eye_reset ? 'text' : 'password'" name="password_reset"
                    maxlength="16" clearable label="确认密码" placeholder="再次输入新密码"
                    :right-icon="password_eye_reset ? 'eye-o' : 'closed-eye'"
                    :right-icon-class="password_eye_reset ? 'van-icon-eye-o' : 'van-icon-closed-eye'"
                    @click-right-icon="password_reset_fn"
                    :rules="[{ required: true, message: '确认密码不能为空' },
                    { pattern: /^(?=.*[a-zA-Z])(?=.*\d).{6,12}$/, message: '确认密码必须包含数字和字母或6-12位' }, confirmPasswordRule]" />
            </van-cell-group>
            <div style="margin: 1rem;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>

定义规则

<script lang="ts" setup>
import { ref } from 'vue';

const pwd = ref('')//密码
const confirmPassword = ref('')//确认密码
const username = ref('')//用户名
const password_eye = ref(false)
const password_eye_reset = ref(false)
const password_fn = () => {
    password_eye.value = !password_eye.value
}
const password_reset_fn = () => {
    password_eye_reset.value = !password_eye_reset.value
}

const confirmPasswordRule = {
    validator: (value: string) => {
        if (value === pwd.value) {
            return true; // 校验通过
        }
        return '两次密码输入不一致';
    },
};
const onSubmit = (value) => {
    console.log('value  ----->  ', value);
}
</script>

样式

.page {
  padding-top: 15px;
  width: 100%;
  min-height: 100vh;
  background-color: @pageBgColor;
  overflow: auto;
}