• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >微信小程序 > VUE做出带有数据收集、校验和提交功能表单

VUE做出带有数据收集、校验和提交功能表单

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-11-30

匿名通过本文主要向大家介绍了校验,收集,数据等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
这次给大家带来VUE做出带有数据收集、校验和提交功能表单,VUE做出带有数据收集、校验和提交功能表单的注意事项有哪些,下面就是实战案例,一起来看一下。

示例

https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg

安装

npm install form-create

OR

git clone https://github.com/xaboy/form-create.git
cd form-create
npm install

引入

<!-- import Vue -->
<script src="node_modules/vue/dist/vue.min.js"></script>
<!-- import iview -->
<link rel="stylesheet" href="node_modules/iview/dist/styles/iview.css" rel="external nofollow" >
<script src="node_modules/iview/dist/iview.min.js"></script>
<!-- 省市区三级联动json数据 -->
<script src="/district/province_city_area.js"></script>
<!-- 模拟数据 -->
<script src="mock.js"></script>
<!-- import formCreate -->
<script src="dist/form-create.min.js"></script>

注意! iview版本请>=2.9.2,否则可能存在问题

使用

let rules = window.mock;
new Vue({
 mounted:function(){
 let $f = this.$formCreate(mock,
   {
    onSubmit:function (formData) {
     console.log(formData);
     $f.submitStatus({loading:true});
   }
  });
  //动态添加表单元素
  $f.append($r,'goods_name');
 }
})

$formCreate 参数

  • rules 表单生成规则 [inputRule,selectRule,...]

  • options 初始化配置参数 (详细见底部 createOptions)

  • $f 实例方法

  • formData() 获取表单的value

  • getValue(field) 获取指定字段的value

  • changeField(field,value) 修改指定字段的value

  • resetFields() 重置表单

  • destroy() 销毁表单

  • removeField(field) 删除指定字段

  • fields() 获得表单所有字段名称

  • submit() 表单验证通过后提交表单,触发onSubmit事件

  • validate(successFn,errorFn) 表单验证,如果验证通过执行successFn,未通过则执行errorFn

  • validateField(field,callback) 表单验证指定字段

 $f.validateField(field,(errMsg)=>{
  if(errMsg){
   //TODO 验证未通过
  }else{
   //TODO 验证通过
  }
 });
  • prepend(rule,field = undefined) 在field的字段之前输入指定表单元素,不传入field默认在第一个

$f.prepend({
  type:"input",
  title:"商品简介",
  field:"goods_info",
  value:"",
  props: {
   "type": "text",
   "placeholder": "请输入商品简介",
  },
  validate:[
   { required: true, message: '请输入商品简介', trigger: 'blur' },
  ],
 });

append(rule,field = undefined) 在field的字段之前输入指定表单元素,不传入field默认在最后一个

$f.append({
  type:"input",
  title:"商品简介",
  field:"goods_info",
  value:"",
  props: {
   "type": "text",
   "placeholder": "请输入商品简介",
  },
  validate:[
   { required: true, message: '请输入商品简介', trigger: 'blur' },
  ],
 });
  • submitStatus(props) 修改表单提交按钮状态

$f.submitStatus({
  //按钮类型,可选值为primary、ghost、dashed、text、info、success、warning、error或者不设置
  type:"primary",
  //按钮大小,可选值为large、small、default或者不设置
  size:"large",
  //按钮形状,可选值为circle或者不设置
  shape:undefined,
  //开启后,按钮的长度为 100%
  long:true,
  //设置button原生的type,可选值为button、submit、reset
  htmlType:"button",
  //设置按钮为禁用状态
  disabled:false,
  //设置按钮的图标类型
  icon:"ios-upload",
  //按钮文字提示
  innerText:"提交",
  //设置按钮为加载中状态
  loading:false
 })
  • btn.loading() 让表单提交按钮进入loading状态

  • btn.finish() 让表单提交按钮恢复正常状态

rules 表单元素规则

hidden 隐藏字段

hiddenRule:
{
 type:"hidden",//必填!
 //字段名称
 field:"id", //必填!
 //input值
 value:"14" //必填!
}

input 输入框

inputRule :
{
  type:"input",//必填! 
  //label名称
  title:"商品名称",//必填!
  //字段名称
  field:"goods_name",//必填!
  //input值
  value:"iphone 7",
  props: {
   //输入框类型,可选值为 text、password、textarea、url、email、date
   "type": "text", //必填!
   //是否显示清空按钮
   "clearable":false, 
   //设置输入框为禁用状态
   "disabled": false, 
   //设置输入框为只读
   "readonly": false,
   //文本域默认行数,仅在 textarea 类型下有效
   "rows": 4, 
   //自适应内容高度,仅在 textarea 类型下有效,可传入对象,如 { minRows: 2, maxRows: 6 }
   "autosize": false, 
   //将用户的输入转换为 Number 类型
   "number": false, 
   //自动获取焦点
   "autofocus": false, 
   //原生的自动完成功能,可选值为 off 和 on
   "autocomplete": "off", 
   //占位文本
   "placeholder": "请输入商品名称", 
   //输入框尺寸,可选值为large、small、default或者不设置
   "size": "default",
   //原生的 spellcheck 属性
   "spellcheck": false,
  },
  event:{
   //按下回车键时触发
   enter:(event)=>{},
   //设置 icon 属性后,点击图标时触发
   click:(event)=>{},
   //数据改变时触发
   change:(event)=>{},
   //输入框聚焦时触发
   focus:(event)=>{},
   //输入框失去焦点时触发
   blur:(event)=>{},
   //原生的 keyup 事件
   keyup:(event)=>{},
   //原生的 keydown 事件
   keydown:(event)=>{},
   //原生的 keypress 事件
   keypress:(event)=>{},
  },
  validate:[
   { required: true, message: '请输入goods_name', trigger: 'blur' },
  ],
 }

validate 表单验证规则,具体配置查看 : https://github.com/yiminghe/async-validator

radio 单选框

radioRule :
{
  type:"radio",//必填!
  //label名称
  title:"是否包邮",//必填!
  //字段名称
  field:"is_postage",//必填!
  //input值
  value:"0",
  //可选参数
  options:[
   {value:"0",label:"不包邮",disabled:false},
   {value:"1",label:"包邮",disabled:true},
  ],//必填!
  props: {
   //可选值为 button 或不填,为 button 时使用按钮样式




 
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 小程序的开发:表单的验证(代码)
  • VUE做出带有数据收集、校验和提交功能表单

相关文章

  • 2018-11-30微信小程序 应用生命周期详解
  • 2018-11-30微信小程序消息推送php服务器验证
  • 2018-11-30微信小程序开发图片加载(本地,网路)实例代码
  • 2018-11-30微信小程序中实现同步请求的方法
  • 2018-11-30小程序开发--input标签实例教程
  • 2018-11-30微信小程序中input表单与redio及下拉列表的使用
  • 2018-11-30微信小程序日历组件开发
  • 2018-11-30微信小程序picker组件详解实例代码
  • 2018-11-30微信小程序开发中怎样做出城市选择
  • 2018-11-30微信小程序 css使用技巧总结

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 小程序中授权相册的解决办法(附代码)
    • 微信小程序之五星评价功能制作
    • 关于微信小程序的动态传参
    • 微信小程序request请求的详细介绍
    • 微信小程序中表单提交和验证以及正则表达式的用法介绍(附代码)
    • 微信小程序页面跳转传参详解
    • 微信小程序-豆瓣电影demo代码
    • 微信小程序 本地存储及登录页面处理实例详解
    • 小程序开发之图片边框解决方法
    • 详解微信小程序开发相册选择和拍照实例代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有