vant-form 统一校验表单

vant 官网 点击进入

vant 官网提供了submit按钮,但是submit按钮实在很不好用(防抖节流用不了,独立样式不好用)

vant 官网提供的form的校验方法 :

在这里插入图片描述

当我在输入:

 console.log(this.$refs.form)

输出的是:

在这里插入图片描述
发现了其中的validateAll,打断点进去,发现该方法用Promise.all去提交所有验证,如果发现errors.length大于1,返回reject,否则返回resolve

 validateAll: function validateAll() {
      var _this2 = this;
      return new Promise(function (resolve, reject) {
        Promise.all(_this2.fields.map(function (item) {
          return item.validate();
        })).then(function (errors) {
          errors = errors.filter(function (item) {
            return item;
          });
          if (errors.length) {
            reject(errors);
          } else {
            resolve();
          }
        });
      });
    },
    // @expo

所以我们可以用这个方法来判断所有相判断的检验规则,代码为


 this.$refs.form.validateAll().then((res) => {
       console.log('全部校验成功')
 },(res)=>{
       console.log('校验失败')
 });

  • 5
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你使用的是 Vant 2.x 版本,可以尝试加上`ref`属性,然后在提交表单的时候手动触发校验,示例代码如下: ```html <template> <van-form ref="form"> <van-field v-model="name" name="name" label="用户名" placeholder="请输入用户名" :rules="nameRules"></van-field> <van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入密码" :rules="passwordRules"></van-field> <van-button type="primary" @click="submitForm">提交</van-button> </van-form> </template> <script> export default { data() { return { name: '', password: '', nameRules: [ { required: true, message: '请输入用户名' } ], passwordRules: [ { required: true, message: '请输入密码' } ] } }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 校验通过,提交表单 console.log('submit form') } else { // 校验不通过 console.log('validate failed') } }) } } } </script> ``` 如果使用的是 Vant 3.x 版本,可以使用 `validate` 方法自动触发校验,示例代码如下: ```html <template> <van-form :model="form" :rules="rules"> <van-field v-model="form.name" name="name" label="用户名" placeholder="请输入用户名"></van-field> <van-field v-model="form.password" type="password" name="password" label="密码" placeholder="请输入密码"></van-field> <van-button type="primary" @click="submitForm">提交</van-button> </van-form> </template> <script> export default { data() { return { form: { name: '', password: '' }, rules: { name: [ { required: true, message: '请输入用户名' } ], password: [ { required: true, message: '请输入密码' } ] } } }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 校验通过,提交表单 console.log('submit form') } else { // 校验不通过 console.log('validate failed') } }) } } } </script> ``` 其中 `:model` 绑定表单数据,`:rules` 绑定校验规则,点击提交按钮时通过 `validate` 方法触发校验

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值