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


Posted in Javascript onOctober 29, 2019

重点部分:点击表单的 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表单验证是否为空值的实例详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 Javascript
vue获取form表单的值示例
Oct 29 #Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 #Javascript
使用axios请求时,发送formData请求的示例
Oct 29 #Javascript
基于form-data请求格式详解
Oct 29 #Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 #Javascript
JS操作字符串转数字的常见方法示例
Oct 29 #Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 #Javascript
You might like
基于mysql的论坛(1)
2006/10/09 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
用Python抢过年的火车票附源码
2015/12/07 Python
多个应用共存的Django配置方法
2018/05/30 Python
关于python字符串方法分类详解
2019/08/20 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
写出二分查找算法的两种实现
2013/05/13 面试题
三八红旗手先进事迹材料
2014/05/13 职场文书
党员公开承诺书2015
2015/01/21 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
公司催款律师函
2015/05/27 职场文书
担保书范文
2019/07/09 职场文书