时间戳

首页 > 解决方案 > Vue 表单验证错误

javascript - Vue 表单验证错误

问题描述

我尝试使用 vue 创建一个带有验证的表单，但我目前遇到的错误不是定义的错误，而是当前定义的错误。

HTML

<form class="add-comment custom-form" @submit="checkForm" action="/something" method="post" novalidate="true" id="booknow">
    <fieldset>
        <label><i class="fa fa-user-o"></i></label>
        <input type="text" placeholder="Your Name *" value="" v-model="name" id="name"/>
        <div class="clearfix"></div>
        <label><i class="fa fa-envelope-o"></i>  </label>
        <input type="text" placeholder="Email Address*" value="" v-model="email" id="email"/>
    </fieldset>
    <button class="btn big-btn color-bg flat-btn">Book Now<i class="fa fa-angle-right"></i></button>
</form>

Javascript

const app = new Vue({
  el:'#booknow',
  data:{
    errors:[],
    name:null,
    email:null,
  },
  methods:{
    checkForm:function(e) {
      this.errors = [];
      console.log("checkforms");
      if(!this.name) this.errors.push("Name required.");
      if(!this.email) {
        this.errors.push("Email required.");
      } else if(!this.validEmail(this.email)) {
        this.errors.push("Valid email required.");
      }
      if(!this.errors.length) return true;
      e.preventDefault();
    },
    validEmail:function(email) {
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(email);
    }
  } 
})

[Vue 警告]：属性或方法“checkForm”未在实例上定义，但在渲染期间被引用。确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件，

vue.js:597 [Vue 警告]：属性或方法“名称”未在实例上定义，但在渲染期间被引用。确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件

[Vue 警告]：属性或方法“名称”未在实例上定义，但在渲染期间被引用。确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件，

[Vue 警告]：属性或方法“电子邮件”未在实例上定义，但在渲染期间被引用。确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件

[Vue 警告]：属性或方法“电子邮件”未在实例上定义，但在渲染期间被引用。确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件

[Vue 警告]：事件“提交”的处理程序无效：未定义

对这个问题有什么建议吗？

标签： javascripthtmlvue.js

解决方案

制作一个 div 并将您的 booknow id 移动到该 div 上。

<div id="booknow">
    <form class="add-comment custom-form" @submit="checkForm" action="/something" method="post" novalidate="true">
        <fieldset>
            <label><i class="fa fa-user-o"></i></label>
            <input type="text" placeholder="Your Name *" value="" v-model="name" id="name"/>
            <div class="clearfix"></div>
            <label><i class="fa fa-envelope-o"></i>  </label>
            <input type="text" placeholder="Email Address*" value="" v-model="email" id="email"/>
        </fieldset>
        <button class="btn big-btn color-bg flat-btn">Book Now<i class="fa fa-angle-right"></i></button>
    </form>
</div>

推荐阅读