一个方便的Weex Form表单验证组件

为了方便weex开发中表单校验，开发了一个form表单表单组件，比较简陋，但是基本满足常规需求， 组件源码分为两部分：form组件和formItem组件。

使用方法

<template>
    <page-layout title="表单组件例子">
        <form :formData="formData" :checkRule="checkRule" @submit="submit">
             <form-item label="名称:" prop="name">
                 <input v-model="formData.name" style="width: 500px;height: 60px;font-size: 28px" :placeholder="checkRule.name.message" />
             </form-item>
            <form-item label="手机号:" prop="phone">
                <input v-model="formData.phone" type="tel" style="width: 500px;height: 60px;font-size: 28px" :placeholder="checkRule.phone.message" />
            </form-item>
            <form-item label="邮箱:" prop="email">
                <input v-model="formData.email" type="email" style="width: 500px;height: 60px;font-size: 28px" :placeholder="checkRule.email.message" />
            </form-item>
        </form>
    </page-layout>
</template>

<script>
    import PageLayout from '../components/pageLayout.vue';
    import Form from '../components/form.vue';
    import FormItem from '../components/formItem.vue';

    export default {
        components: {
            FormItem,
            Form,
            PageLayout},
        name: 'form-demo',
        data() {
            return {
                formData: {
                    name: '',
                    phone: '',
                    email:''
                },
                checkRule: {
                    name:{require:true,type:'',message:'请选输入名称',checkMessage:'数据格式错误',
                        checkFun:function (value) {
                            return value.length <= 2;
                        }},
                    phone:{require:true,type:'phone',message:'请选输入手机号',checkMessage:'手机号数据格式错误',checkFun:null},
                    email:{require:true,type:'',message:'请选输入邮箱',checkMessage:'邮箱数据格式错误',checkFun:null}
                }
            }
        },
        methods:{
            submit(){
                let modal=weex.requireModule('modal');
              modal.alert({message:"数据完整通过！"});
            }
        }
    };
</script>

<style scoped>

</style>

组件介绍

form属性

参数	说明	类型	默认值
formData	表单的对象模型	Object	null
checkRule	表单验证规则	Object	null

form事件

事件	说明	类型
submit	表单提交事件	Funtion

form的checkRule属性说明

参数	说明	类型	可选值
require	是否必填	Boolean
type	验证类型（phone、email等）	String	'phone'/'email'/'number'
message	数据为空时的提示信息	String
trigger	触发验证时间的时机	String
checkFun	自定义验证回调方法	Funtion(value)
checkMessage	数据验证失败是的提示信息	String

formItem组件

参数	说明	类型	默认值
label	文本描述	String	null
prop	属性名	String	null
labelStyle	文本显示样式	Object	null

自定义提交按钮：

 <div slot="actions">
        <div class="cancelBtn">
            <text class="cancelBtnText">取消</text>
        </div>
        <div class="submitBtn" @click="submit(emit)">
            <text class="submitBtnText">提交</text>
        </div>
 </div>

源码链接

源码和使用demo分别在component和demo文件夹下,源码很简单，有其它需求可以clone下来自行扩展。 默认的校验类型之后phone、email、number三种，大家可以在源码中扩展，也可以直接自定义校验函数。 类型校验源码相关如下：

                    switch (this.checkRule[prop].type){
                            case "phone":
                                if(!this.phoneCheck(this.formData[prop])){
                                    modal.alert({message:this.checkRule[prop].checkMessage});
                                    return;
                                }
                                break;
                            case "email":
                                if(!this.emailCheck(this.formData[prop])){
                                    modal.alert({message:this.checkRule[prop].checkMessage});
                                    return;
                                }
                                break;
                            case "number":
                                if(!this.numberCheck(this.formData[prop])){
                                    modal.alert({message:this.checkRule[prop].checkMessage});
                                    return;
                                }
                                break;
                        }