vue-form表单验证是否为空值的实例详解

重点部分：点击表单的 submit按钮 触发form 部分 @submit=”submit”事件：

submit事件 定义在js部分：

prevent：文档上说了在事件后面加上 .prevent就可以阻止默认事件了。

form @submit.prevent=”submit”

 <form @submit.prevent=\"submit\">
    <input type=\"text\" v-model=\"userName\" placeholder=\"请输入你的姓名\" class=\"name-style\" maxlength=\"20\"/>
    <div class=\"sex\">
      <select v-model=\"selectedSex\">
        <option>boy</option>
        <option selected = \"selected\">girl</option>
      </select>
    </div> 
      <input type=\"text\" v-model=\"phoneNumber\" placeholder=\"请输入你的手机号\" class=\"phone-number-style\"/>
    <div class=\"guide-style\">
      <select v-model=\"selectedGuild\">
        <option selected=\"selected\" value=\"\">请选择一个导购： </option>
        <option v-for=\"guild in guilds\" value =\"{{ guild.name }}\">{{ guild.name }}</option>
      </select>
    </div>
    <input type=\"submit\" value =\"注册\" class=\"register-style\"/>
  </form> 

  data () {
    return {
    userName: \'\',  //请输入你的姓名
    selectedSex: \'\',//选择性别
    phoneNumber: \'\',//请输入你的手机号
    guilds: [],   
    selectedGuild: \'\' ///请选择一个导购
    }
  },
  methods: {

 //1.重点是这个方法 submit () {} - form @submit.prevent=\"submit\" -重点是这个方法 submit () {},
 //2.可以在这里向服务器发送数据
   submit () {

    if (!this.userName) {
      showToast(\'请输入姓名!\')
      return false
    }

    if (!this.phoneNumber) {
      showToast(\'请输入手机号码!\')
      return false
    }

    if (!checkTel(this.phoneNumber)) {
      showToast(\'手机号格式不正确\')
      return false
    }

    if (!this.selectedGuild) {
      showToast(\'请选择导购!\')
      return false
    }

    return true
    }
  }

以上这篇vue-form表单验证是否为空值的实例详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。