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">姓名：label>
        <input id="user_name" name="user_name" type="text" v-model="user_name">
      p>
      <p>
        <label for="user_age">年龄：label>
        <input
          id="user_age"
          name="user_age"
          type="number"
          v-model="user_age"
          min="0"
          max="100"
        >
      p>
      <p>
        <label for="user_email">邮箱：label>
        <input
          id="user_email"
          name="user_email"
          type="email"
          v-model="user_email"
        >
      p>
      <p>
        <label for="user_like">爱好：label>
        <select name="user_like" id="user_like" v-model="user_like">
          <option value="0">看书option>
          <option value="1">写代码option>
          <option value="2">看代码option>
        select>
      p>
      <p>
        <button type="submit">提交button>
      p>
    form>

action里面的内容可以是指向你的请求地址+接口名也可以是指向某个页面（例如：demo.aspx)；method的取值可以是get或post可不带参数，后台可以根据表单组件的键值对获取到参数值。

注意顶端的 novalidate="true" 。这个的意思去除浏览器的自主校验，因为浏览器会尝试在 type="email" 的字段校验邮件地址。在这里我们是要自定义校验，所以需要加上这个属性。

没加novalidate属性提交的时候：

会有这样的提示，这就不会执行我们的自定义校验了，所以把它禁用了。

js

export default {
     
  data() {
     
    return {
     
      errMsg: [],
      user_name: null,
      user_age: null,
      user_email: null,
      user_like: null
    }
  },
  methods: {
     
    checkForm(e) {
     
      this.errMsg = []
      if (!this.user_name) {
     
        this.errMsg.push('用户姓名不能为空')
      }
      if (!this.user_age) {
     
        this.errMsg.push('年龄格式输入错误')
      }
      if (!this.user_email) {
     
        this.errMsg.push('邮箱不能为空')
      } else if (!this.checkEmail(this.user_email)) {
     
        this.errMsg.push('邮箱格式不正确')
      }
      if (!this.errMsg.length) {
     
        return true
      }
      e.preventDefault() // 通知浏览器不要执行与事件关联的默认动作
    },
    checkEmail(email) {
     
      var reg = /^(([^<>()\[\]\\.,;:\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 reg.test(email)
    }
  }
}

css

p {
     
  width: 80%;
  margin: 0 auto;
}
input,
select {
     
  display: inline-block;
  width: 50%;
  height: 25px;
}
select {
     
  height: 40px;
}
button {
     
  width: 100px;
  background: rgb(41, 135, 243);
  color: white;
}
.err_content li {
     
  color: red;
}

运行结果