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 相关文章推荐
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 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
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
javascript 继承实现方法
2009/08/26 Javascript
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
python检测远程端口是否打开的方法
2015/03/14 Python
python判断windows系统是32位还是64位的方法
2015/05/11 Python
Python实现控制台输入密码的方法
2015/05/29 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
Python创建数字列表的示例
2019/11/28 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
python读取mysql数据绘制条形图
2020/03/25 Python
用Python进行websocket接口测试
2020/10/16 Python
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
学校法制宣传日活动总结
2014/11/01 职场文书
佛光寺导游词
2015/02/10 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
装修安全责任协议书
2016/03/22 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
python ansible自动化运维工具执行流程
2021/06/24 Python
MySQL七种JOIN类型小结
2021/10/24 MySQL
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS