uniapp表单密码校验：判断两次密码输入是否一致

最新推荐文章于 2025-03-24 15:53:22 发布

给孩子一口饭吃吧

最新推荐文章于 2025-03-24 15:53:22 发布

阅读量5.2k

点赞数 5

文章标签： uni-app 微信小程序 javascript

本文链接：https://blog.csdn.net/qq_47875931/article/details/126888966

版权

本文介绍了如何在uniapp中进行表单密码校验，特别是利用uniapp内置的`this.$u.test.object`方法进行密码验证。同时，展示了如何处理确认密码与原始密码一致性的异步校验，并在微信小程序环境下设置表单规则。在表单提交时，使用`validate`方法确保数据有效。这对于前端开发尤其是uniapp和微信小程序开发者具有指导意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uniapp表单密码校验：

无需使用自定义validator进行校验，使用uniapp文档内自带的this.$u.test.object({value:password})即可。

  <u-form-item label="登陆密码" labelWidth="80" prop="password" borderBottom ref="item1">
      <u-input type="password" v-model="model1.password" border="none" placeholder="请输入密码"></u-input>
    </u-form-item>
    <u-form-item label="确认密码" labelWidth="80" prop="Tpassword" borderBottom ref="item1">
      <u-input v-model="model1.Tpassword" border="none" placeholder="请确认密码"></u-input>
    </u-form-item>

表单中，prop后是判定校验的规则名，v-model动态绑定data内的值。

data() {
      return {
        model1: {
            password: '',
            Tpassword: ''
        },
        rules: {
          'password': [{
            type: 'string',
            required: true,
            message: '不可为空',
            trigger: ['blur', 'change']
          }],
          'Tpassword': [{
            type: 'string',
            required: true,
            message: '密码不为空',
            trigger: ['blur', 'change']
          },{
          //使用异步方法进行校验
            asyncValidator: (rules, value, callback) => {
              if (value != this.model1.password){
                callback(new Error('两次密码校验不一致'))
              }
              return uni.$u.test.object({values:password});
            },
            message: '两次密码校验不一致',
            trigger: ["change","blur"]
          }]
        },
      }
},

在微信小程序中使用，如果不是自定义的判定校验，则在onready中添加setRules方法设置规则：

	onReady() {
	// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
		this.$refs.form1.setRules(this.rules)
	},

最后表单提交的按钮上写submit，总结表单校验：

this.$refs.form1.validate().then(res => {
    console.log('表单数据信息',res);
      this.noSure();
    }).catch(err => {
      console.log('表单错误信息',err);
    })