vant3中提交表单且校验不通过时滚动至错误的表单项

问题描述:在vant3中,我们想在表单校验不通过的时候,回滚到首个错误项目,在API中有Props供我们使用,

但是我们在使用的时候,会发现有俩个问题,第一个问题是,假如表单上面还有个盒子,在滚到首个错误项的时候,上面的那个盒子会消失不见。解决方法是这俩个盒子都得使用固定定位。然后定位到页面的某个位置(具体代码我就不写了,比较懒,你们自己写吧,我就提供思路。)。

第二个问题是,表单回滚的时候,只能回滚到表单的位置,到不了标题,这样效果不是很好,例:

所以我们得换一种写法,就是在表单的盒子上面加一个id,使用@failed="failed"来实现,

const failed = values => {

// 获取到首个校验错误的盒子

  const targetElement = document.querySelector(`#${values.errors[0].name}`);

// 回滚到首个校验错误盒子的位置

  targetElement.scrollIntoView({

    // behavior: "smooth",        // 滚动效果,使用平滑滚动效果

  });

};

要注意<van-field> 里面的name=userName要和div里面的那个userName要一致,因为failed这个方法收集到的错误是<van-field>里面的name这个字段,使用这个方法实现回滚的话,我们也可以改变回滚的效果,是快速效果,还是平滑滚动,我们也可以控制了。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过以下步骤实现vant4点击按钮触发校验但不提交表单: 1. 在模板使用van-form组件包裹表单内容,并设置ref属性。 2. 在表单使用van-field组件,并设置prop属性。 3. 在van-form组件设置rules属性,用于定义表单校验规则。 4. 在按钮上使用@click事件监听器,并在事件处理函数调用this.$refs.form.validate()方法,触发表单校验。 5. 在事件处理函数判断表单校验结果,如果校验通过则可以执行其他操作。 下面是一个简单的示例代码: ```html <template> <van-form ref="form" :rules="rules"> <van-field v-model="name" label="姓名" prop="name" /> <van-field v-model="email" label="邮箱" prop="email" /> <van-button type="primary" @click="validateForm">校验</van-button> </van-form> </template> <script> export default { data() { return { name: '', email: '', rules: { name: [ { required: true, message: '请填写姓名', trigger: 'blur' }, { min: 2, max: 10, message: '姓名长度在 2 到 10 个字符', trigger: 'blur' } ], email: [ { required: true, message: '请填写邮箱', trigger: 'blur' }, { type: 'email', message: '邮箱格式不正确', trigger: 'blur' } ] } } }, methods: { validateForm() { this.$refs.form.validate(valid => { if (valid) { // 表单校验通过,可以执行其他操作 console.log('表单校验通过') } else { // 表单校验不通过,需要处理错误信息 console.log('表单校验不通过') } }) } } } </script> ``` 在这个示例,当用户点击“校验”按钮,会触发validateForm方法,在这个方法调用form的validate方法进行表单校验。如果校验通过,则会在控制台输出“表单校验通过”;如果校验不通过,则会输出“表单校验不通过”。需要注意的是,这里并没有使用submit按钮提交表单,而是使用一个普通的按钮触发校验

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值