elementui校验登录密码和确认密码

本文介绍了一种用于前端表单验证的密码一致性检查方法,确保用户两次输入的密码相同。
var new_password = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.user.userPassWord !== '') {
                        this.$refs.user.validateField('userPassWord');
                    }
                    callback();
                }
            };
var userPassWord = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次输入密码'));
    } else if (value !== this.user.newPassWord) {
        callback(new Error('两次输入密码不一致!'));
    } else {
        callback();
    }
};
要使用Element UI的`MessageBox`实现账号密码校验,可以结合自定义校验规则表单验证逻辑。以下是一个示例代码: ```vue <template> <div> <el-form ref="loginForm" :model="loginForm" :rules="formRule"> <el-form-item label="账号" prop="username"> <el-input v-model="loginForm.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="loginForm.password"></el-input> </el-form-item> <el-form-item> <el-button @click="handleLogin">登录</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { // 自定义的一个校验函数 // rule可忽略,value需要校验的值,callback回调函数 let checkPassword = (rule, value, callback) => { if (value.trim() === "") { // 如果不校验通过可以通过new Error对象,将提示文字通过参数传入 callback(new Error("输入登录密码不能为空")); } else { // 如果callback的参数为空就表示校验通过 callback(); } }; return { loginForm: { username: "", password: "", }, formRule: { // 每一个校验的对象,与表单中每项绑定的值一一对应 // 可以有多个校验规则,所以是个数组,数组中存放校验对象 // required必填,message:校验失败后的提示文字;trigger:触发方式,blur表示失去焦点时触发 username: [ { required: true, message: "输入的登录账号不能为空", trigger: "blur" }, ], password: [ { validator: checkPassword, trigger: "blur" }, ], }, }; }, methods: { handleLogin() { this.$refs.loginForm.validate((valid) => { if (valid) { // 模拟登录请求 setTimeout(() => { if (this.loginForm.username === "admin" && this.loginForm.password === "123456") { this.$message({ type: "success", message: "登录成功", }); // 登录成功跳转逻辑 this.$router.push({ path: "/" }); } else { this.$msgbox({ title: "提示", message: "账号或密码错误,请重新输入", type: "error", confirmButtonText: "确定", }); } }, 1000); } else { this.$message.error("请输入所有字段"); return false; } }); }, }, }; </script> ``` 在上述代码中,首先定义了自定义的密码校验规则`checkPassword`,并将其应用到表单的`password`字段上。在`handleLogin`方法中,通过`this.$refs.loginForm.validate`对表单进行验证。如果验证通过,模拟登录请求,根据账号密码的输入情况进行判断。如果账号密码正确,使用`this.$message`提示登录成功并进行页面跳转;如果账号或密码错误,使用`this.$msgbox`弹出提示框告知用户重新输入。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值