• vue中简单的修改密码校验的代码


    <el-form :inline="true" :model="ruleForm" ref="ruleForm" :rules="rules" label-width="120px" size="medium">
    <el-row class="text-center">
    <el-col :span="24">
    <el-form-item label="旧密码" prop="oldPsd">
    <el-input type="password" v-model="ruleForm.oldPsd" placeholder="请输入旧密码"></el-input>
    </el-form-item>
    </el-col>
    <el-col :span="24">
    <el-form-item label="新密码" prop="newPsd">
    <el-input type="password" v-model="ruleForm.newPsd" placeholder="请输入新密码"></el-input>
    </el-form-item>
    </el-col>
    <el-col :span="24">
    <el-form-item label="确认新密码" prop="checkNewPsd">
    <el-input type="password" v-model="ruleForm.checkNewPsd" placeholder="请再次输入新密码"></el-input>
    </el-form-item>
    </el-col>
    </el-row>
    <el-row class="text-center">
    <el-col :span="24">
    <el-form-item size="small" class="text-center subBtn">
    <el-button type="primary" @click="onSave">确定修改</el-button>
    </el-form-item>
    </el-col>
    </el-row>
    </el-form>
     
    export default {
    // components: {
    // },
    data() {
    var validatePass = (rule, value, callback) => {
    if (value === '') {
    callback(new Error('请输入密码'))
    } else {
    if (this.ruleForm.checkNewPsd !== '') {
    this.$refs.ruleForm.validateField('checkNewPsd')
    }
    callback()
    }
    }
    var validatePass2 = (rule, value, callback) => {
    if (value === '') {
    callback(new Error('请再次输入密码'))
    } else if (value !== this.ruleForm.newPsd) {
    callback(new Error('两次输入密码不一致!'))
    } else {
    callback()
    }
    }
    return {
    loading: false,
    ruleForm: {},
    userData: {},
    rules: {
    oldPsd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    newPsd: [{ validator: validatePass, trigger: 'blur' }],
    checkNewPsd: [{ validator: validatePass2, trigger: 'blur' }]
    }
    }
    }
    }
  • 相关阅读:
    python笔记1
    git笔记
    手撸一个简陋直播系统
    spring-boot学习笔记1
    设计模式1--简单工厂模式
    网联:第一章:浏览器生成消息
    php线上预览日志--4.websocket客户端
    php线上预览日志--3.websocket服务部署
    php线上预览日志--2.谷歌插件开发
    php线上预览日志--1.概述
  • 原文地址:https://www.cnblogs.com/soonK/p/9577656.html
Copyright © 2020-2023  润新知