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('校验失败')
 });

Vant 4.0 的 Form 组件是一个用于处理表单验证的强大工具。它提供了一套易于使用的 API 和丰富的选项,使得开发者能够轻松地创建并管理各种类型的表单输入,包括必填项、正则表达式验证、自定义验证规则等。 以下是 Vant Form 表单校验的基本步骤: 1. 安装 Vant UI 及其 Form 组件:首先,需要通过 npm 或 yarn 将 Vant 版本升级到 4.x,并安装 `vant-form` 包。 ```bash npm install vant vant-form --save ``` 2. 引入组件:在 Vue 项目中导入 `Form` 组件和其他相关的验证规则模块。 ```javascript import { Form, Field, Rule } from 'vant'; ``` 3. 创建表单结构:使用 `<form>` 标签配合 `Field` 组件定义各个字段。 ```html <template> <Form ref="form" :model="formData"> <Field name="username" v-model="formData.username" placeholder="请输入用户名" rules="[required]"></Field> <!-- 其他输入字段 --> </Form> </template> ``` 4. 验证规则设置:利用 `rules` 属性和 `Rule` 构造函数设置验证规则,如必填项(`required`)、邮箱格式验证等。 5. 触发验证:当用户提交表单时,可以调用 `Form` 的 `validate` 方法,或者在 `@submit` 事件中触发验证。 ```javascript <script> export default { data() { return { formData: { username: '', email: '' }, rules: { username: [{ type: 'string', required: true, message: '用户名不能为空' }], email: [{ type: 'email', required: true, message: '邮箱格式错误' }] } }; }, methods: { handleSubmit(e) { this.$refs.form.validate((valid) => { if (valid) { // 提交数据... } else { console.log('表单验证失败'); } }); } } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值