Vee使用Netlify表单验证版本x3

2024-05-06 • 问答

我有一个简单的工作表格，其中使用Netlify表格进行提交。 Netlify表单非常简单，只需添加

name="contact" data-netlify="true" method="POST"和Netlify完成所有后端工作

它看起来像这样：

<template>
  <form ref="contact" name="contact" action="/success" 
  data-netlify="true" method="POST" @submit.prevent="submit()">
    <input type="text"  />
    <button type="submit"> Send </button>
  </form>
</template>

<script>
export default {
	methods: {
		submit() {
			this.$refs.contact.submit()
		},},}
</script>

上面的代码按预期工作。现在，我尝试在表单中添加vee-validate插件，您需要在其中添加两个组件 ValidationProvider ， ValidationObserver 。这是我得到错误的地方。我的代码现在看起来像这样：

<template>
  <ValidationObserver ref="contact" tag="form" name="contact" action="/success" data-netlify="true" method="POST" @submit.prevent="submit()">
  	<ValidationProvider rules="required" tag="div">
      <input type="text"  />
    </ValidationProvider>
    <button type="submit"> Send </button>
  </ValidationObserver>
</template>

<script>
import { ValidationProvider,ValidationObserver } from 'vee-validate'
export default {
  methods: {
    async submit() {
      const isValid = await this.$refs.contact.validate()
      if (!isValid) {
        return
      }

      this.$refs.contact.submit()
    },}
</script>

请注意，我使用tag="form"将组件呈现为表单，因为如果仅包装表单，Netlify将无法识别该表单。在我的submit()中，我首先运行Validation，如果结果是肯定的，则像以前一样提交表单，但遇到此错误this.$refs.contact.submit is not a function。有趣的是，如果我在可以正常运行的Submit（）函数中运行document.querySelector('.form').submit()。

我认为我提交的内容不好，或者也许我做错了。

我对Netlify一无所知，但是vee-validate要求您在输入中设置linearHypothesis(fit.UR,c("regchange = 1","secession = 1","fselfdet = 0.5")) Linear hypothesis test Hypothesis: regchange = 1 secession = 1 fselfdet = 0.5 Model 1: restricted model Model 2: lnpeak ~ nonviol + lnpop + statesup + regchange + secession + fselfdet Res.Df RSS Df Sum of Sq F Pr(>F) 1 159 435.58 2 156 392.53 3 43.048 5.7026 0.0009913 *** --- Signif. codes: 0 ‘***’ 0.001 ‘**’ 0.01 ‘*’ 0.05 ‘.’ 0.1 ‘ ’ 1或手动管理验证。我的理解是，它使用v-model属性来找出v-model中要跟踪的内容。这就是将规则（ValidationProvider）应用到的项目，因此我认为您需要这样做：

required

Vee使用Netlify表单验证版本x3

qwe541171815 回答：Vee使用Netlify表单验证版本x3

大家都在问