uniapp-验证两次输入的密码是否一致

uniapp 验证两次输入的密码是否一致

1.界面示例

2.表单

	<view class="change_from">
			<u-form :model="form" ref="uForm">
				<u-form-item prop="oldpassword"><u-input v-model="form.oldpassword" type="password" placeholder="请输入原始密码" /></u-form-item>
				<u-form-item prop="newPwd"><u-input v-model="form.newPwd" type="password" placeholder="请输入6~15位新密码" /></u-form-item>
				<u-form-item prop="confirmPwd"><u-input v-model="form.confirmPwd" type="password" placeholder="请确认新密码" /></u-form-item>
			</u-form>
		</view>
		<u-button @click="submit" class="submit-btn">确认修改</u-button>

3.自定义验证规则

	data() {
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				// if (this.form.confirmPwd !== '') {
				// 	// this.$refs.uForm.validateField('confirmPwd');
				// 	callback(new Error('请输入新密码'));
				// }
				callback();
			}
		};
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.form.newPwd) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
			form: {
				oldpassword: '',
				newPwd: '',
				confirmPwd: ''
			},
			rules: {
				oldpassword: [
					{
						required: true,
						message: '请输入原密码',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']	
					}
				],
				newPwd: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					{ min: 6, max: 16, message: '长度在 6 到 12 个字符', trigger: 'blur' },
					{ validator: validatePass, trigger: 'blur' }
				],
				confirmPwd: [
					{ required: true, message: '请确认密码', trigger: 'blur' },
					{ min: 6, max: 16, message: '长度在 6 到 12 个字符', trigger: 'blur' },
					{ validator: validatePass2, trigger: 'blur', required: true }
				]
			}
		};
	},

加载规则验证

onReady() {
		this.$refs.uForm.setRules(this.rules);
	}

4.提交验证

	submit() {
			this.$refs.uForm.validate(valid => {
				if (!valid) {	
					console.log('验证失败');
				} else {
					console.log('验证通过');
					console.log(this.form)
					// this.changePassword()     //接口调用
					// uni.navigateTo({
					// 	url: '../index/index'
					// });
				}
			});
		},