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' }]

}

}

}

}

转载于:https://www.cnblogs.com/soonK/p/9577656.html