<uni-forms ref="form" :rules="rules" :modelValue="formData">
<uni-forms-item required name="password">
<view class="inp">
<view>
原密码:
</view>
<uni-easyinput type="password" :styles="{color: 'black'}" :inputBorder="false"
v-model="formData.password" placeholder="请输入当前密码" />
</view>
</uni-forms-item>
<uni-forms-item required name="newPassword1">
<view class="inp">
<view>
新密码:
</view>
<uni-easyinput type="password" :inputBorder="false" v-model="formData.newPassword1"
placeholder="请输入新密码" />
</uni-row>
</view>
</uni-forms-item>
<uni-forms-item required name="newPassword2">
<view class="inp">
<view>
确认新密码:
</view>
<uni-easyinput type="password" :inputBorder="false" v-model="formData.newPassword2"
placeholder="请输入新密码" />
</uni-row>
</view>
</uni-forms-item>
</uni-forms>
<button type="primary" @click="submit">确认修改</button>
data中的表单数据和验证规则
data() {
return {
time: false,
// 校验表单数据
formData: {
password: '',
newPassword1: '',
newPassword2: '',
},
// 校验规则
rules: {
password: {
rules: [{
required: true,
errorMessage: '请输入原密码',
},
{
minLength: 4,
maxLength: 20,
errorMessage: '用户名长度在 {minLength} 到 {maxLength} 个字符',
}
]
},
newPassword1: {
rules: [{
required: true,
errorMessage: '请输入新密码',
},
{
minLength: 4,
maxLength: 20,
errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
}
]
},
newPassword2: {
rules: [{
required: true,
errorMessage: '请再次输入新密码',
},
{
validateFunction: function(rule, value, data, callback) {
console.log('data', data)
if (value != data.newPassword1) {
callback('两次输入的密码必须相同')
}
return true
}
}
]
}
}
}
submit() {
this.$refs.form.validate().then(form => {
//RequestChangePassword是我封装的修改密码的请求
// RequestChangePassword(form).then(res => {
// uni.showToast({
// title: '修改密码成功'
// })
// }).catch(err => {
// console.log('表单错误信息:', err);
// })
console.log("验证成功了",form);
}).catch(err => {
console.log('表单错误信息:', err);
})
}