uniapp实现确认密码验证

原创已于 2022-09-02 15:38:16 修改 · 5.1k 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#uni-app #servlet #java

于 2022-09-02 15:17:18 首次发布

uniapp开发微信小程序专栏收录该内容

12 篇文章

订阅专栏

这篇博客介绍了在Vue.js中进行表单验证的方法，特别是针对新密码和确认密码一致性的验证规则。通过示例代码展示了如何使用`u-form-item`和`u-input`组件创建密码输入框，并在rules中定义了验证函数validatePass和validatePass2，确保密码输入不为空且两者必须一致。这有助于提升前端表单的安全性和用户体验。

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