Question

我正在尝试使用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”未在实例上定义，但在渲染期间被引用。确保该属性是反应性的，无论是在data选项中，还是对于基于类的组件，

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

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

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

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

关于这个问题有什么建议吗？

Answer 1

创建一个div，然后在该div上移动您的booknow ID。

<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>

Vue表单验证错误

1 个答案: