1.效果

2.表单代码

<u-form-item label="新密码:" 
 prop="password" borderBottom ref="item1" style="width: 55rpx;">
<u--input v-model="model2.password" border="none" type="password" :maxlength="20"
								placeholder="请输入新密码"></u--input>
</u-form-item>
<u-form-item label="确认密码:"
 prop="password1" borderBottom ref="item1" style="width: 60rpx;">
<u--input v-model="model2.password1" border="none" type="password" :maxlength="20"
								placeholder="请再次输入新密码"></u--input>
</u-form-item>

3.验证规则

var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.model2.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};

写在rules里面 

password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 20,
							message: '长度在 6 到 20 个字符',
							trigger: 'blur'
						},
						{
							validator: validatePass,
							trigger: 'blur'
						}
					],
					password1: [{
							required: true,
							message: '请确认密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 20,
							message: '长度在 6 到 20 个字符',
							trigger: 'blur'
						},
						{
							validator: validatePass2,
							trigger: 'blur',
							required: true
						}
					]

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐