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 相关文章推荐
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 Javascript
原生js实现贪吃蛇游戏
Oct 26 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 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
DOMXML函数笔记
2006/10/09 PHP
js代码实现微博导航栏
2015/07/30 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
Python ZipFile模块详解
2013/11/01 Python
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
python简单分割文件的方法
2015/07/30 Python
Python常用的爬虫技巧总结
2016/03/28 Python
开源Web应用框架Django图文教程
2017/03/09 Python
Python切片工具pillow用法示例
2018/03/30 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
Python3 集合set入门基础
2020/02/10 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
智利最大的网上商店:Linio智利
2016/11/24 全球购物
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
个人对照检查材料
2014/02/12 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
基于PyQt5制作一个群发邮件工具
2022/04/08 Python
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python