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 相关文章推荐
js计数器代码
Nov 04 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 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
php 生成随机验证码图片代码
2010/02/08 PHP
PHP开发中常用的字符串操作函数
2011/02/08 PHP
围观tangram js库
2010/12/28 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
python 控制语句
2011/11/03 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
python画图的函数用法以及技巧
2019/06/28 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
Python3 元组tuple入门基础
2020/02/09 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
.NET程序员的数据库面试题
2012/10/10 面试题
目标管理责任书
2014/04/15 职场文书
小学家长评语大全
2014/04/16 职场文书
离职证明标准格式
2014/09/15 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
工作年限证明模板
2015/06/15 职场文书
新娘婚礼致辞
2015/07/27 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
Java Socket实现多人聊天系统
2021/07/15 Java/Android