更新记录

1.1.0(2021-09-14)

感谢hen***@sina.com反馈 修改多选框,下拉框,单选框等组件放在第一个就会报错。

1.0.0(2021-08-08)

首次发布

查看更多

平台兼容性

Vue2 Vue3
App 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 快应用
2.8.11 app-vue app-nvue
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

导入即用 全端支持

有问题 + wx : zy597172583 标注来意 可评论 看到及时回复

使用方式

<template>
  <view class="content">
    <active-form :formDate.sync="formData" num></active-form>

    <view class="subform" @click="sub">提交表单</view>
  </view>
</template>

<script>
import ActiveForm from "@/components/active-form/active-form";
export default {
  components: {
    ActiveForm,
  },
  data() {
    return {
      formData: [
        {
          id: "kjjns", //id必须唯一 可以是数字
          placeholder: "输入名字",
          label: "姓名",// 提示输入名
          type: "text", //类型
          rules: {
            name: "realName", //字段名 即提交给后端的字段
            value: "",
            verify: true, //是否开启校验
            errMess: "姓名未填写",  //校验不通过的错误提示
          },
        },
        {
          id: "uisdfjks",
          placeholder: "请输入手机号",
          label: "手机",
          type: "phone",
          //   oneKeyPhone:true,
          rules: {
            name: "phone",
            value: "", //字段值
            verify: true,
            errMess: "手机号格式不正确",
          },
        },
        {
          id: "gdfjZjnx",
          placeholder: "请输入地址信息",
          label: "地址 ",
          type: "text",
          rules: {
            name: "location",
            value: "",
            verify: false,
            errMess: "地址不能为空",
          },
        },
        {
          id: "asdfdfgd",
          placeholder: "选择头像",
          label: "头像 ",
          type: "image",
          rules: {
            name: "photo",
            value: "",
            verify: true,
            errMess: "请选择头像",
          },
        },
        {
          id: "asdfgf",
          placeholder: "(例如:平面设计、品牌设计、UI设计)",
          label: "是否有设计相关经历?",
          type: "textarea",
          rules: {
            name: "experience",
            value: "", //字段值
            verify: true,
            errMess: "请输入经历",
          },
        },
        {
          id: "ukhjg",
          placeholder: "选择",
          label: "性别",
          type: "select",
          show: false, //弹出选择框是否显示,type为selects时此字段一定要有
          title: "请选择性别",
          list: [//选项列表
            {
              value: 1,//最终提交拿到的值
              label: "男",//展示给用户的字段
            },
            {
              value: 2,
              label: "女",
            },
          ],
          rules: {
            name: "sex",
            value: "", //字段值 0 1
            label: "", //名字
            verify: false,
            errMess: "性别未选择",
          },
        },
        {
          id: "oodsndf",
          placeholder: "请选择兴趣",
          label: "兴趣",
          type: "checkbox",
          list: [
            {
              value: "篮球",//最终提交拿到的值
              name: "篮球",//展示给用户的字段
            },
            {
              value: "足球",
              name: "足球",
            },
            {
              value: "羽毛球",
              name: "羽毛球",
            },
            {
              value: "唱歌",
              name: "唱歌",
            },
            {
              value: "街舞",
              name: "街舞",
            },
            {
              value: "yyds",
              name: "yyds",
            },
          ],
          rules: {
            name: "interest",
            value: "", //字段值 0 1
            label: "", //名字
            verify: false,
            errMess: "请选择年龄段",
          },
        },
        {
          id: "sadasgh",
          placeholder: "请选择年龄段",
          label: "年龄",
          type: "radio",
          list: [
            {
              value: "15岁以下",
              label: "15岁以下",
            },
            {
              value: "16~20岁",
              label: "16~20岁",
            },
            {
              value: "21~25岁",
              label: "21~25岁",
            },
            {
              value: "26~30岁",
              label: "26~30岁",
            },
            {
              value: "31~40岁",
              label: "31~40岁",
            },
            {
              value: "40岁以上",
              label: "40岁以上",
            },
          ],
          rules: {
            name: "age",
            value: "", //字段值 0 1
            label: "", //名字
            verify: false,
            errMess: "请选择年龄段",
          },
        },
        {
          id: "koptymk",
          placeholder: "请输入公司名称",
          label: "公司",
          type: "text",
          rules: {
            name: "company",
            value: "",
            verify: false,
            errMess: "公司名称不能为空",
          },
        },
      ],
    };
  },
  methods: {
    // 提交表单
    sub() {
      this.$vervify(this.formData); //表单校验 成功会继续往下走 失败抛出异常

      const res = this.$submitForm(this.formData); //校验成功 获取表单值
      console.log('表单对象 :>> ', res);
    },
  },
};
</script>

<style lang="less">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .subform {
    margin: 30rpx;
    padding: 20rpx 60rpx;
    border-radius: 18rpx;
    background-color: bisque;
  }
}
</style>

2.main.js中注册组件校验

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

// 注册并使用动态表单获取值和校验
import verification from '@/components/active-form/js/verification'
Vue.use(verification)

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

3.组件props

参数名 类型 介绍
formDate Array .sync双向绑定的表单值 , 展示表单的js串
num Boolean 默认false 每个表单项前面是否带有序号

4.form 项参数说明

参数名 类型 是否必填 介绍
id String number 必填索引
placeholder String 提示
type String 该表单项类型 当前支持 text(文本)、 number、 phone、 radio、 checkbox、 image(照片)、 select(上拉选择)
list Array type为 radio、 checkbox、select时有效
rules.errMess String 校验不通过时的错误提示
rules.name String 接收字段名 后端接收的字段
rules.value String 字段值
rules.verify Boolean 是否校验该字段

5.校验方法

事件名 返回参数 简介
$vervify(this.formData) null 表单校验 成功会继续往下走 失败抛出异常
$submitForm(this.formData); 表单字段对象 校验成功 获取表单值
<script>
export default {
  methods: {
    //点击提交按钮时触发 提交表单  this.formData为使用者定义的生成表单的js串
    sub() {
      this.$vervify(this.formData); //表单校验 成功会继续往下走 失败抛出异常
      const res = this.$submitForm(this.formData); //校验成功 获取表单值
      console.log('表单对象 :>> ', res);
    },
  },
};

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问