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);
    })
Logo

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

更多推荐