更新记录

0.0.1(2020-08-18) 下载此版本

h5端测试可用,小程序端没有测试,慎用!!!


平台兼容性

本组件依赖于async-validator包,如未安装请先安装:

npm i async-validator

示例代码:

<template>
    <view class="content">

        <validator-form ref="form" :model="form" :rules="rules">
            <validator-form-item prop="input">
                <input type="text" v-model="form.input">
            </validator-form-item>

            <button type="primary" @click="submit">提交</button>
        </validator-form>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                form: {
                    input: ''
                },
                rules: {
                    // 对应validator-form-item组件的prop的绑定属性
                    input: [
                        {
                            required: true, // 必填
                            message: '请填写input' 
                        }
                    ]
                }
            }
        },
        onLoad() {

        },
        methods: {
            beforeSubmit (e) {
            },
            submit (){
                // 触发验证
                this.$refs.form.validate(valid => {

                    if (valid) {

                    } else {

                    }
                })
            }
        }
    }
</script>

<style>
    page{
        padding: 30upx;
    }

    input{
        border-bottom: 1px solid #666;
    }

    // 自定义组件样式
    /deep/.form-item{
        display: block;
        margin-bottom: 40upx;
    }
</style>

更多验证方法可参考async-validator官方文档

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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