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 相关文章推荐
你真的了解JavaScript吗?
Feb 24 Javascript
javascript中window.event事件用法详解
Dec 11 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
vuex实现的简单购物车功能示例
Feb 13 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
php实现rc4加密算法代码
2012/04/25 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
React快速入门教程
2017/01/17 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
在Vue中使用antv的示例代码
2020/06/29 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
python使用cookie库操保存cookie详解
2014/03/03 Python
python中Flask框架简单入门实例
2015/03/21 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
《临死前的严监生》教学反思
2014/02/13 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
优秀团员个人总结
2015/02/26 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers