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

 更新时间:2019年10月29日 17:12:26   作者:dq_095  
今天小编就为大家分享一篇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表单验证是否为空值的实例详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vant的安装和配合引入Vue.js项目里的方法步骤

    Vant的安装和配合引入Vue.js项目里的方法步骤

    这篇文章主要介绍了Vant的安装和配合引入Vue.js项目里的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 详解Vue路由自动注入实践

    详解Vue路由自动注入实践

    这篇文章主要介绍了详解Vue路由自动注入实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue.js element-ui tree树形控件改iview的方法

    vue.js element-ui tree树形控件改iview的方法

    这篇文章主要介绍了vue.js element-ui tree树形控件改iview的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • vue中保留字符串中的空格完美解决方案

    vue中保留字符串中的空格完美解决方案

    这篇文章主要介绍了vue中保留字符串中的空格的解决方案,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • vue v-viewer组件使用示例详解(v-viewer轮播图)

    vue v-viewer组件使用示例详解(v-viewer轮播图)

    这篇文章主要介绍了vue v-viewer组件使用示例详解(v-viewer轮播图),本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-02-02
  • vue中自定义右键菜单插件

    vue中自定义右键菜单插件

    这篇文章主要为大家详细介绍了vue中自定义右键菜单插件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 浅谈Vue.js中的v-on(事件处理)

    浅谈Vue.js中的v-on(事件处理)

    本篇文章主要介绍了Vue.js中的v-on(事件处理),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 关于Vue项目跨平台运行问题的解决方法

    关于Vue项目跨平台运行问题的解决方法

    这篇文章主要介绍了关于Vue项目跨平台运行问题的解决方法,特别记录一下踩的坑,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-09-09
  • Vue实现购物车计算总价功能

    Vue实现购物车计算总价功能

    这篇文章主要为大家详细介绍了Vue实现购物车计算总价功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue cli 全面解析

    vue cli 全面解析

    vue是一套构建用户界面的渐进式框架。这篇文章主要介绍了vue cli的相关知识,本文给大家及时的非常全面,需要的朋友可以参考下
    2018-02-02

最新评论