最适应的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 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
javascript 无提示关闭窗口脚本
Aug 17 Javascript
js null,undefined,字符串小结
Aug 21 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 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中的时间显示
2007/01/18 PHP
PHP学习 变量使用总结
2011/03/24 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
Python学习笔记_数据排序方法
2014/05/22 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
庆祝教师节演讲稿
2014/09/03 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
二手房购房协议书范本
2014/10/05 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
个人工作能力自我评价
2015/03/05 职场文书
运动会5000米加油稿
2015/07/21 职场文书
员工担保书范本
2015/09/22 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL