最适应的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 相关文章推荐
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
JavaScript中DOM详解
Apr 13 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
layer 关闭指定弹出层的例子
Sep 25 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 Javascript
canvas实现贪食蛇的实践
Feb 15 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
Thinkphp无限级分类代码
2015/11/11 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
Javascript select下拉框操作常用方法
2009/11/09 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
KMP算法精解及其Python版的代码示例
2016/06/01 Python
Python中如何获取类属性的列表
2016/12/26 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
详解python破解zip文件密码的方法
2020/01/13 Python
python剪切视频与合并视频的实现
2020/03/03 Python
Python 去除字符串中指定字符串
2020/03/05 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
Python如何定义有默认参数的函数
2020/08/10 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
校长竞聘演讲稿
2014/05/16 职场文书
高中生学习计划书
2014/09/15 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
小学生成绩单评语
2014/12/31 职场文书
土地租赁协议书
2015/01/29 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript