实现代码如下
<Form ref="resetPwdForm" :model="resetPwdForm" :rules="resetPwdRules">
<FormItem prop="password">
<p>
<Icon slot="prefix" class="iconfont iconPC-2" />
<span>密码</span>
</p>
<Input v-model="resetPwdForm.password" type="password" placeholder="请输入您的新密码">
<span slot="suffix">
<i class="iconfont iconPC-73" slot="suffix"></i>
</span>
</Input>
</FormItem>
<FormItem prop="surePwd">
<p>
<Icon slot="prefix" class="iconfont iconPC-2" />
<span>确认密码</span>
</p>
<Input v-model="resetPwdForm.surePwd" type="password" placeholder="请再次输入确认您的新密码">
<span slot="suffix">
<i class="iconfont iconPC-73" slot="suffix"></i>
</span>
</Input>
</FormItem>
<Form>
export default {
data() {
var surePwd = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.resetPwdForm.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
}
return {
resetPwdForm: {},
resetPwdRules: {
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ pattern: /^\d{4,16}$/, message: '请输入正确的密码', trigger: 'blur' }
],
surePwd: [
{ required: true, message: '请输入确认密码', trigger: 'blur' },
{ validator: surePwd, required: true, trigger: 'blur' }
],
}
}
}
}