【uniapp】uni-forms表单校验规则只执行一次?

使用uni-forms校验遇到一个问题:

<uni-forms :model-value="userInfo" :rules="rules" ref="form2">

  <uni-forms-item required label="账号:" name="code">
    <uni-easyinput placeholder="请输入账号" type="text" v-model="userInfo.code"/>
  </uni-forms-item>

  <uni-forms-item required label="新密码:" name="password">
    <uni-easyinput placeholder="请输入新密码:" type="password" password-icon="false" v-model="userInfo.password"/>
  </uni-forms-item>

  <uni-forms-item required label="确认密码:" name="Tpassword">
    <uni-easyinput placeholder="请确认密码:" type="password" password-icon="false" v-model="userInfo.Tpassword"/>
  </uni-forms-item>

  <uni-forms-item>
    <view style="display: flex;justify-content: space-evenly;">
      <button class="btn-wrap" type="primary" size="large" 
              @click="Submit" block>确认
      </button>
      <button class="btn-wrap" type="primary" size="large"
              @click="cancel" block>取消
      </button>
    </view>
  </uni-forms-item>

</uni-forms>

规则校验如下:

rules: {
  code: {
    rules: [
      {
        required: true,
        errorMessage: '账号不可为空',
      },
    ]
  },
  password: {
    rules: [
      {
        required: true,
        errorMessage: '密码不可为空',
      }
    ]
  },
  Tpassword: {
    rules: [
      {
        required: true,
        errorMessage: '密码不可为空',
      },
      {
        validateFunction:function(rule, value, data, callback) {
          console.log(value, data, rule, callback)
          if(value != data.password) {
            callback('两次密码输入不一致')
          }
        }
      }
    ]
  }
}
onReady() {
  // 如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则
  this.$refs.form2.setRules(this.rules)
},

因为做的项目是uniapp转小程序,加上uni-forms我有自定义的校验规则,所以要使用setRules来设置规则。

测试的时候发现,我的表单校验规则只能生效一次,比如不能为空触发后,就不能触发同级的两次密码输入不一致;

我开始是猜测异步问题,后来用Promise试了下,没用。

最后看文档,发现是自己粗心略掉一个点:
在这里插入图片描述

使用了自定义校验规则就不能用rules配置校验规则,因为onReady( )里已经配置了this.$refs.form2.setRules(this.rules),解决这个问题去掉:rules="rules"就可以了。


顺便整理一下几个用到的uniapp自带的校验规则:

1.仅能输入中文

let inputName = (/^[\u4e00-\u9fa5]+$/);

2.仅能输入数字

let inputName = (/^[0-9]+$/);

3.手机号合法

let iphoneReg = /^1[3456789]\d{9}$/;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值