最适应的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 相关文章推荐
JS window.opener返回父页面的应用
Oct 24 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
loading动画特效小结
Jan 22 Javascript
Vue异步组件使用详解
Apr 08 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 Javascript
解决vue scoped scss 无效的问题
Sep 04 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
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
python使用PyFetion来发送短信的例子
2014/04/22 Python
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
python3实现windows下同名进程监控
2018/06/21 Python
Django 多环境配置详解
2019/05/14 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
计算机网络毕业生自荐信
2013/10/01 职场文书
优秀广告词大全
2014/03/19 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
学习保证书
2015/01/17 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
Java设计模式之享元模式示例详解
2022/03/03 Java/Android
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL