vue表单提交的简单示例详细讲解

基本的示例

表单提交一般是在开发管理系统的时候使用最多。有时候你会需要自定义表单内容以及校验规则。以下是关于Form的属性讲解和一个简单的示例。

给定一个表单，包含有四个内容姓名、年龄、邮箱、爱好，其中除了爱好以外都是必填项。
在这里我把错误信息统一显示在顶部。 实际开发中错误信息一般是在输入框后面或是下面显示

关于表单form的一些属性

首先我们来看一下表单form的一些属性

1. id：表单的唯一标识
2. name：表单的名字
3. method：定义表单提交的方法，有两种方法：Post方法和Get方法
4. action：用于处理表单的服务器端页面（以URL 形式表示）

表单中的控件有两个属性是非常重要的：name属性和value属性，每一个控件的这两个属性将构成“键值对”提交到action属性所定义的地址（或页面）进行处理。

示例

HTML

<form
      action="https://example.api.com/home"
      id="my_form"
      @submit="checkForm"
      method="get"
      novalidate="true"
    >
      <div class="err_content" v-if="errMsg.length">
        <b>错误提示：</b>
        <ul>
          <li v-for="(err,index) in errMsg" :key="index">{
  {err}}</li>
        </ul>
      </div>
      <p>
        <label for="user_name">姓名：