最适应的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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
JavaScript 继承机制的实现(待续)
May 18 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
js面向对象编程总结
Feb 16 Javascript
AngularJS中的路由使用及实现代码
Oct 09 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 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获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
laravel安装和配置教程
2014/10/29 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
node.js基础知识汇总
2020/08/25 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
Django文件上传与下载(FileFlid)
2019/10/06 Python
python tkinter控件布局项目实例
2019/11/04 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
解决方案设计综合面试题
2015/08/31 面试题
出国导师推荐信
2014/01/16 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
工程材料采购方案
2014/05/18 职场文书
初三毕业评语
2014/12/26 职场文书
保研专家推荐信范文
2015/03/25 职场文书