<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‘ }]
}
}
}
}
原文地址：https://www.cnblogs.com/soonK/p/9577656.html