uni表单组件封装

展示效果

表单效果

组件介绍

组件说明

此组件为一个输入框，利用它可以快速实现表单验证，输入内容

基本使用

<m-form-input label="邮箱" code="Email" rule="^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$" errTip="请输入正确的邮箱地址" />

Props

参数	说明	类型	默认值	可选值
label	标题	String	标题	-
type	输入内容的类型	String	text	text / number
code	表单字段 id，用于配合 m-form-btn 提交数据使用	String	id	-
value	初始值，用于编辑页面绑定值	String, Number	-	-
placeholder	placeholder显示值	String	请输入数据	-
required	是否必填	Boolean	false	false / true
rule	正则表达式，用于表单验证	String	-	-
errTip	错误提示	String	请输入正确的数据	-

组件说明

此组件为一个多行输入框，利用它可以快速实现表单验证，输入内容

基本使用

<m-form-textarea label="备注(必填)" code="Remark0" required placeholder="请填写备注" />

Props

参数	说明	类型	默认值	可选值
label	标题	String	标题	-
code	表单字段 id，用于配合 m-form-btn 提交数据使用	String	id	-
value	初始值	String，用于编辑页面绑定值	-	-
placeholder	placeholder显示值	String	请输入数据	-
required	是否必填	Boolean	false	false / true
maxlength	限制文本输入的最长字符串	Number	100	-

组件说明

此组件为一个单选框，数据在当前页面

基本使用

<m-form-radio label="水果" code="Fruit" :list="Fruits" />
data() {
    return {
        Fruits:[{
            id:1,
            label:'苹果'
        },{
            id:2,
            label:'香蕉'
        }]
    }
},

Props

参数	说明	类型	默认值	可选值
label	标题	String	标题	-
code	表单字段 id，用于配合 m-form-btn 提交数据使用	String	id	-
value	list数据对应的索引，-1代表不选中，用于编辑页面绑定值	Number	-1	-
list	带选择的数据列表，对象结构得满足{id:0,label:'名称'}	Array	[]	-
required	是否必填	Boolean	false	false / true

说明

当未选中任何值时，返回数据为null，否则返回数据对象{id:0,label:'名称'}。

组件说明

此组件为一个多选框，数据在当前页面

基本使用

<m-form-checkbox label="水果(多选)" code="Fruits" :value="activeFruits" :list="Fruits" />
data() {
    return {
        Fruits:[{
            id:1,
            label:'苹果'
        },{
            id:2,
            label:'香蕉'
        }],
        activeFruits:[]
    }
},

Props

参数	说明	类型	默认值	可选值
label	标题	String	标题	-
code	表单字段 id，用于配合 m-form-btn 提交数据使用	String	id	-
value	list数据对应的id,初始值，用于编辑页面绑定值	Array	[]	-
list	带选择的数据列表，对象结构得满足{id:0,label:'名称'}	Array	[]	-

说明

当未选中任何值时，返回数据为[]，否则返回数据对象[{id:0,label:'名称'}]。

组件说明

此组件为一个提交按钮，专为form表单设计使用

基本使用

<m-form-btn @submit="tapSubmit" />

tapSubmit(e){
    if(!e.isRules){
        this.$u.toast('请按要求录入数据')
    }else{
        console.log(e.pageData)
    }
}

Props

参数	说明	类型	默认值	可选值
label	按钮显示文字	String	提交	-

Events

事件名称	说明	回调参数
submit	提交表单	(e:{isRules,pageData}),isRules:数据是否验证通过;pageData:要提交的数据

使用例子

<template>
    <view class="page">
        <m-form-input label="手机号" required type="number" code="Phone" rule="^1[0-9]{10,10}$" placeholder="请输入手机号" errTip="请输入正确的手机号"/>
        <m-form-input label="邮箱" code="Email" rule="^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$" errTip="请输入正确的邮箱地址" />
        <m-form-textarea label="备注(必填)" code="Remark0" required placeholder="请填写备注" />
        <m-form-textarea label="备注(选填)" code="Remark1" placeholder="请填写备注" :maxlength="200" />
        <m-form-radio label="水果(单选)" required code="Fruit" :value="0" :list="Fruits" />
        <m-form-checkbox label="水果(多选)" code="Fruits" :value="activeFruits" :list="Fruits" />
        <m-form-btn @submit="tapSubmit" />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                Fruits:[{
                    id:1,
                    label:'苹果'
                },{
                    id:2,
                    label:'香蕉'
                },{
                    id:3,
                    label:'梨'
                },{
                    id:4,
                    label:'柚子'
                },{
                    id:5,
                    label:'橘子'
                },{
                    id:6,
                    label:'猕猴桃'
                },{
                    id:7,
                    label:'哈密瓜'
                },{
                    id:8,
                    label:'西瓜'
                }],
                activeFruits:[]
            }
        },
        onLoad() {
            
        },
        onUnload() {
            //页面卸载，清空页面填写的值
            this.$_clearPageData();
        },
        methods: {
            tapSubmit(e){
                console.log(e.pageData)
                if(!e.isRules){
                    this.$u.toast('请按要求录入数据')
                }else{
                    console.log(e.pageData)
                }
            }
        }
    }
</script>

<style scoped>
    
</style>