我应该如何将 VeeValidate 3 用于手机浏览器？

Posted 2023-03-06

【中文标题】我应该如何将 VeeValidate 3 用于手机浏览器？

【英文标题】：How should I use VeeValidate 3 for browsers on mobiles?

【发布时间】：2021-02-27 09:22:38

【问题描述】：

使用 VeeValidate 在移动平台上验证基本表单似乎存在问题。

尽管用户更正了输入，但表单仍会继续报告错误。在桌面浏览器上没有问题。

我正在使用 vue 2.6.11、vee-validate 3.4.5，并且我正在使用 android 8 和 Google 键盘的移动设备上使用 Firefox 进行测试。

<template>
  <ValidationProvider rules="required|min:2"  v-slot="v">
    <input v-model="value" type="text">
    <span> v.errors[0] </span>
  </ValidationProvider>
</template>

<script>
import  ValidationProvider  from 'vee-validate';
import  extend  from 'vee-validate';
import min, required from "vee-validate/dist/rules";


extend('required', required);
extend('min', min);

export default 
  name: "ValidateTest",
  components: 
    ValidationProvider
  ,
  data() 
    return 
      value: ''
    
  

</script>

当我开始输入时，我收到错误“field is not valid”，正如预期的那样，但在我输入超过最少 2 个字符后，错误仍然存​​在。如果我单击页面上的任何位置，错误就会消失。如果我再次开始输入，即使输入的字符多于所需的 2 个字符，错误也会返回。

更新 这是我第一次尝试移动浏览器的表单验证。仔细阅读，似乎手机上的表单验证涉及到我没有意识到的额外复杂性。有一个很好的讨论 here（一般讨论 - 与 Vue.js 或 VeeValidate 无关）。

我现在将研究根据用户是使用台式机还是移动设备来以不同方式处理验证的可能性。对于移动浏览器，我可能只进行服务器端验证并返回有用的消息。我仍然会感谢任何关于 Vue.js 验证框架的建议，这些框架可以处理跨浏览器工作的所有平台或技术......

【参考方案1】：

我已将 VeeValidate 替换为 css 类，用于验证状态和使用每个输入的计算值显示的消息。计算值确定输入值是否有效。这可以在移动设备上顺利运行，足以满足我基本表单的需求。

使用bootstrap 使这变得更加简单