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 广告后加载,加载完页面再加载广告
Nov 25 Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
js 颜色选择插件
Jan 23 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
webpack打包js的方法
Mar 12 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
node.js使用yargs处理命令行参数操作示例
Feb 11 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的分页功能
2007/03/21 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
javascript制作2048游戏
2015/03/30 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
python中迭代器(iterator)用法实例分析
2015/04/29 Python
python生成圆形图片的方法
2020/03/25 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
用python制作个视频下载器
2021/02/01 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
服装设计专业毕业生推荐信
2013/11/09 职场文书
医药个人求职信范文
2014/01/29 职场文书