Vue自定义表单验证规则

Vue.js表单验证：实现密码修改功能

原创已于 2023-06-07 16:42:55 修改 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#数学建模 #正则表达式

于 2023-06-07 16:22:22 首次发布

该文章展示了如何在Vue.js应用中进行表单验证，特别是针对密码修改的场景。通过添加rules属性定义验证规则，设置prop属性关联验证字段，以及编写自定义验证函数，确保用户输入的密码符合要求。在提交时调用validate方法进行验证，只有验证通过后才会执行后续操作，如更新密码。

第一步：在表单上添加 rules 属性，设置验证规则对象

第二步：在表单项设置 prop属性，声明验证的名称

第三步：设置验证规则对象

export default {
  data(){
    //验证规则函数
    let 验证规则函数 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码')); //验证未通过
      } else {
        callback(); //验证通过
        // 这里也可以发请求拿数据
      }
    };
    
    //返回数据
    return {
      rules: {
        name: [
          {validator: 验证规则函数, trigger: 'blur'}
        ],
      }
    }
  }
}

第四步：点击提交时验证

例：

<template>
    <el-card>
        <div slot="header">
            <span>修改密码</span>
        </div>

        <!-- 表单 -->
        <el-form ref="form" :rules="rules" :model="form" label-width="100px" status-icon>
            
            <!-- 原密码 -->
            <el-form-item label="原密码" prop="oldpwd">
                <el-input v-model="form.oldpwd" type="password"></el-input>
            </el-form-item>

            <!-- 新密码 -->
            <el-form-item label="新密码" prop="newpwd">
                <el-input v-model="form.newpwd" type="password"></el-input>
            </el-form-item>

            <!-- 确认新密码 -->
            <el-form-item label="确认新密码" prop="newpwd2">
                <el-input v-model="form.newpwd2" type="password"></el-input>
            </el-form-item>

            <!-- 按钮 -->
            <el-form-item>
                <el-button type="primary"  @click="submit">确定</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
import {checkOldpwd, editPwd} from "@/api/user.js";  //账号模块接口
import local from "@/utils/local.js";  //本地存储
export default {
    data() {
        // 表单验证
        var confirmPwd = (rule, value, callback) => {
            if (value !== this.form.newpwd) {
                callback(new Error('两次输入密码不一致'));
            } else {
                callback();
            }
        };

        // 验证旧密码是否正确
        let oldpwd =async (rule, value, callback) => {
            if(value.length < 6){
                callback(new Error("密码必须写6位数以上"));
            }else{
                let res =await checkOldpwd({oldPwd: value});
                if(res.data.code ===201){
                    callback(new Error(res.data.msg));
                }else{
                    callback();
                }
            }
        }

        // 验证新密码是否和旧密码重复
        let newpwd = (rule, value, callback) => {
            if(this.form.newpwd === this.form.oldpwd){
                callback(new Error("新密码和原密码重复"));
            }else{
                callback();
            }
        }
        
    return {
        form: {
            oldpwd: '',
            newpwd: '',
            newpwd2: "",
        },

        // 表单验证
        rules: {
            oldpwd: [
                    { required: true, message: '请输入旧密码', trigger: 'blur' },
                    { validator: oldpwd, trigger: 'blur' },
                ],
            newpwd: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { validator: newpwd, trigger: 'blur' },
                ],
            newpwd2: [
                    { validator: confirmPwd, required: true, trigger: 'blur' },
                    ],
                }
            }
        },

        methods:{
            // 确定按钮
            submit(form){
                this.$refs.form.validate(async (valid) => {
                    if (valid) {
                        let res = await editPwd({newPwd: this.form.newpwd});
                        if(res.data.code === 0){
                            this.$router.push("/login");
                            local.clear();
                        }
                    } 
                });
            },

            // 重置按钮
            reset(form){
                this.$refs.form.resetFields();
            }
    }
}
</script>