如何使用 veevalidate 和 CDN 验证输入字段

【问题标题】：how to validate a input field using veevalidate with CDN如何使用 veevalidate 和 CDN 验证输入字段
【发布时间】：2021-08-13 21:48:38
【问题描述】：

我在这里使用 VeeValidate 表单验证库 For Vue Js。使用 CDN 我试图实现这一点，但我无法验证电子邮件输入字段。所以我哪里出错了，请告诉是否有人能找到问题。

<html>
<head>
<!-- jsdelivr cdn -->
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
<script src="https://unpkg.com/vue@next"></script>
<!-- cloudflair cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.1.1/vee-validate.min.js"></script>
</head>
<body>
    <input v-validate="'required|email'" name="email" type="text">
    <span>{{ errors.first('email') }}</span>

</body>
</html>

【问题讨论】：

标签： vee-validate

【解决方案1】：

Vue.use(VeeValidate);

new Vue({
  el: '#root',
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.2.9/vee-validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@vee-validate/rules@4.4.7/dist/vee-validate-rules.min.js"></script>

<div id="root">
  <div>
    <input v-validate="'required|email'" name="email" type="text">
    <span>{{ errors.first('email') }}</span>

  </div>
</div>

您忘记将 Vue 对象绑定到 HTML 元素，即

new Vue({
 el: '#root',
});

我还使用添加了 vee 验证插件

Vue.use(VeeValidate);

请注意我使用的是 Vue 2 而不是 3

【讨论】：