码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-09-03 13:53:07      阅读:2139      评论:0      收藏:0      [点我收藏+]

标签:efi   20px   cli   ace   one   for   loading   inpu   new   

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

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

标签:efi   20px   cli   ace   one   for   loading   inpu   new   

原文地址:https://www.cnblogs.com/soonK/p/9577656.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!