uniapp表单密码校验：判断两次密码输入是否一致-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp表单密码校验：判断两次密码输入是否一致。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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，总结表单校验：文章来源地址https://www.toymoban.com/news/detail-516482.html

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