最适应的vue.js的form提交涉及多种插件【推荐】


Posted in Javascript onAugust 27, 2018

基于vue.js这里写了一个小列子;涉及到 vue.js动态添加css样式 ,tab切换 ,touch,表单提交,验证,toast,数据双向绑定等。

先上效果图再一一讲解:

最适应的vue.js的form提交涉及多种插件【推荐】最适应的vue.js的form提交涉及多种插件【推荐】

一、首先用到的是动态修改css

最适应的vue.js的form提交涉及多种插件【推荐】

点击X将隐藏温馨提示:

1.先给整个div绑定 v-bind

<div class="rz-notice" v-bind:style="{ display: isno}">
    <p>名片用来鉴别是相关人员,温馨提示:<img src="../assets/static/img-icon/lan_cha.png" @click="hiddenwords"></p>
 </div>

注释:图片地址为你自己的地址

<div class="rz-notice" v-bind:style="{ display: isno}">
 <p>名片用来鉴别是相关人员,温馨提示:
  <img src="../assets/static/imgicon/lan_cha.png" @click="hiddenwords"></p>
</div>

2.在data里定义

isno:'block',:

3.写click事件方法

methods: {
  hiddenwords() {
  this.isno = 'none'
  },
}

一个简单的点击设置样式为none便写好了。

根据你的业务需求写你动态添加的样式;方法都是一样的。

二、下面写提交时最常见验证

最适应的vue.js的form提交涉及多种插件【推荐】

Toast样式 我根据自己的主题色进行了修改

Toast引入import { Toast } from 'vant'

2.1 这里涉及到了v-modal 数据双向绑定

<div class="my-content-list">
 <div class="color-black"><span style="margin-right: 0.6rem;">
  真实姓名:</span><input v-model="yoursname" placeholder="请输入您的真实姓名" /></div>
</div>
<div class="my-content-list">
 <div class="color-black"><span style="margin-right: 0.6rem;">手机号码:</span>
 <input v-model="yoursphone" placeholder="请输入您的手机号码" /></div>
</div>
<div class="yzbtn" @click="submitBtn">立即认证</div>

2.2在data定义 yoursname和yoursphone的初始值

yoursname: ' ',
 yoursphone: ' ',

2.3写方法z

submitBtn() {
 var reg = /^1[3|4|5|8][0-9]\d{4,8}$/;
 if(this.yoursname == '') {
 Toast("请填写你的真实姓名");
 return;
 }
 if(this.yoursphone == '' || this.yoursphone == null) {
 Toast("请填写你的手机号码");
 return;
 }
 if(!reg.test(this.yoursphone)) {
 Toast('手机号码格式不正确');
 return;
 }
},

图片上传以及预览图片将在下一篇文章中讲到 每周都会更新一些小列子以及插件方法

最后附上整个代码

欢迎提出你宝贵的意见 一同进步 ​

<template>
 <div class="renzheng">
 <div class="rz-notice" v-bind:style="{ display: isno}">
 <p>名片用来鉴别是相关人员,温馨提示:<img src="../assets/static/img-icon/lan_cha.png" @click="hiddenwords"></p>
 </div>
 <van-tabs v-model="active" swipeable>
 <van-tab v-for="(item,index) in navArr" :title="item.name" class="v-tab">
 <div v-if="index==0">
  <div class="color-black" style="text-align: center;margin-top: 0.4rem;">请上传本人名片照片</div>
  <div class="rz-picter">
  <img src="../assets/jia.jpg" />
  <p><input type="file" style="display: none;" >上传图片</p>
  </div>
  <div class="cuxian"></div>
  <!--
      作者:1150801771@qq.com
      时间:2018-08-24
      描述:form表单
      -->
  <div class="my-content-list">
  <div class="color-black"><span style="margin-right: 0.6rem;">真实姓名:</span><input v-model="yoursname" placeholder="请输入您的真实姓名" /></div>
  </div>
  <div class="my-content-list">
  <div class="color-black"><span style="margin-right: 0.6rem;">手机号码:</span><input v-model="yoursphone" placeholder="请输入您的手机号码" /></div>
  </div>
  <div class="yzbtn" @click="submitBtn">
  立即认证
  </div>
 </div>
 <div v-if="index==1">
  <div class="color-black" style="text-align: center;margin-top: 0.4rem;">请上传本人身份证照片</div>
  <div class="rz-picter">
  <img src="../assets/jia.jpg" />
  <p>上传人像页</p>
  </div>
  <div class="rz-picter">
  <img src="../assets/jia.jpg" />
  <p>上传国辉页</p>
  </div>
  <div class="cuxian"></div>
  <div class="my-content-list">
  <div class="color-black"><span style="margin-right: 0.6rem;">真实姓名:</span><input placeholder="请输入您的真实姓名" /></div>
  </div>
  <div class="my-content-list">
  <div class="color-black"><span style="margin-right: 0.6rem;">手机号码:</span><input type="number" placeholder="请输入您的手机号码" /></div>
  </div>
  <div class="yzbtn">
  立即认证
  </div>
 </div>
 </van-tab>
 </van-tabs>
 </div>
</template>
<script>
 import { Tab, Tabs } from 'vant';
 import { Toast } from 'vant'
 export default {
 name: 'renzheng',
 data() {
 return {
 yoursname: '',
 yoursphone: '',
 
 isno:'block',
 active: 0,
 navArr: [{
  name: "身份认证"
  },
  {
  name: "实名认证"
  }
 ],
 }
 },
 methods: {
 hiddenwords() {
 this.isno = 'none'
 },
 submitBtn() {
 var reg = /^1[3|4|5|8][0-9]\d{4,8}$/;
 if(this.yoursname == '') {
  Toast("请填写你的真实姓名");
  return;
 }
 if(this.yoursphone == '' || this.yoursphone == null) {
  Toast("请填写你的手机号码");
  return;
 }
 if(!reg.test(this.yoursphone)) {
  Toast('手机号码格式不正确');
  return;
 }
 },
 
 }
 }
</script>
<style>
 .rz-notice {
 padding: 0.2rem 0.3rem;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
 background: #F0F5FB;
 color: #28D9EF;
 }
 
 .rz-notice img {
 height: 0.22rem;
 width: 0.22rem;
 }
 
 .rz-picter {
 height: 3rem;
 width: 6rem;
 margin: 0.3rem auto;
 border: 0.01rem solid #ededed;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 }
 /*立即验证*/
 
 .yzbtn {
 width: 90%;
 height: 0.8rem;
 background: #FF6600;
 border-radius: 0.06rem;
 margin: 30px auto;
 text-align: center;
 line-height: 0.8rem;
 color: #FFFFFF
 }
 /*修改原有tab样式*/
 
 .van-tab {
 color: #A3A3A3!important;
 }
 
 .van-tab--active {
 color: #000!important;
 }
 
 .van-tabs__line {
 background-color: #FF6600!important;
 width: 0.7rem!important;
 text-align: center!important;
 align-items: center;
 margin-left: 1.5rem;
 }
 
 .van-toast {
 background-color: #FF6600;
 color: #FFFFFF
 }
 
 .my-content-list {
 padding: 0.3rem;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 border-bottom: 0.01rem solid #EDEDED;
 }
</style>

总结

以上所述是小编给大家介绍的最适应的vue.js的form提交涉及多种插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 #Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 #Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 #Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 #Javascript
vue监听input标签的value值方法
Aug 27 #Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 #Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 #Javascript
You might like
php实现的简易扫雷游戏实例
2015/07/09 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
详解vue2.0模拟后台json数据
2019/05/16 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
Anaconda入门使用总结
2018/04/05 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
tensorflow 查看梯度方式
2020/02/04 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
2014年售后服务工作总结
2014/11/18 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
我的1919观后感
2015/06/03 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
纯html+css实现Element loading效果
2021/08/02 HTML / CSS
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python