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 相关文章推荐
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
react 原生实现头像滚动播放的示例
Apr 21 Javascript
vue+element UI实现树形表格
Dec 29 Vue.js
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实现多服务器共享SESSION数据的方法
2007/03/16 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
2014年应届大学生自我评价
2014/01/09 职场文书
百度吧主申请感言
2014/01/12 职场文书
工程管理英文求职信
2014/03/18 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
python实现Nao机器人的单目测距
2021/09/04 Python
Python函数式编程中itertools模块详解
2021/09/15 Python