Form 表单

由com-form和com-form-item组成，用以收集、校验、提交数据。

基本使用

使用com-form作为表单容器，model绑定表单对象数据

使用com-form-item包裹输入框、选择器等组件，label表示字段名；prop表示表单对象中的属性名。

<com-form ref="form" :model="form">
    <com-form-item prop="name" label="用户名">
        <com-input v-model="form.name" clearable></com-input>
    </com-form-item>
    <com-form-item prop="password" label="密码">
        <com-input v-model="form.password" password></com-input>
    </com-form-item>
    <com-form-item prop="phone" label="手机号">
        <com-input type="int" v-model="form.phone"></com-input>
    </com-form-item>
    <com-form-item prop="idcard" label="身份证">
        <com-input v-model="form.idcard"></com-input>
    </com-form-item>
    <com-form-item prop="email" label="邮箱">
        <com-input v-model="form.email"></com-input>
    </com-form-item>
    <com-form-item prop="car" label="车牌号">
        <com-input v-model="form.car"></com-input>
    </com-form-item>
    <com-form-item prop="gender" label="性别">
        <com-select v-model="form.gender">
            <com-option value="1" label="男" :border-radius="[40,0,0,40]"></com-option>
            <com-option value="2" label="女" :border-radius="[0,40,40,0]"></com-option>
        </com-select>
    </com-form-item>
    <com-form-item prop="info" label="个人简介" :inline="false">
        <textarea v-model="form.info" placeholder="请输入" style="height: 50rpx"></textarea>
    </com-form-item>
    <com-form-item prop="birthday" label="出生日期">
        <picker mode="date" :value="form.birthday" @change="(e)=>form.birthday=e.detail.value">
            <text v-if="form.birthday">{{form.birthday}}</text>
            <text class="txt-gray-dark" v-else>请选择</text>
            <com-icon name="arrow-down" class="mgl-10"></com-icon>
        </picker>
    </com-form-item>
</com-form>

<script>
data(){
    return {
        form: {
            name: "",
            password: "",
            phone: "",
            info: "",
            birthday: "",
            idcard: "",
            car: "",
            email: "",
            price: "",
        },
    }
}
</script>

表单校验

给表单设置规则校验，rules对象中属性和form-item中绑定相同属性，则表示给该字段添加校验；

每个字段可以添加多条校验规则，故每个字段对应的规则是数组类型。

规则说明：

1. required 表示是否为必填

2. tip 表示校验未通过时显示的提示文字

3. regex 表示正则表达式校验；参考下方密码(password)校验

4. mode 表示使用内置校验。

• 手机号：mode="tel"
• 身份证：mode="idcard"
• 邮箱：mode="email"
• 车牌号: mode="car"

5. type 表示数据类型校验。

• int 只允许整数值
• float 只允许为浮点类型的值

6. 其他校验，可以通过validator函数进行校验，该函数返回true则表示校验通过。

<script>
    data(){
        return {
            rules: {
					name: [
						{ required: true, tip: "用户名不能为空" },
					],
					password: [
						{ required: true, tip: "密码不能为空" },
                        { 
                            regex: /^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9]{8,16}$/, 
                            tip: "密码需要8~16位包含大小写字母和数字" 
                        },
					],
					phone: [
						{ required: true, tip: "手机号不能为空" },
						{ mode: 'tel', tip: "手机号格式不正确" },
					],
					idcard: [
						{ required: true, tip: "身份证不能为空" },
						{ mode: 'idcard', tip: "身份证格式不正确" },
					],
					email: [
						{ required: true, tip: "邮箱不能为空" },
						{ mode: 'email', tip: "邮箱格式不正确" },
					],
					car: [
						{ required: true, tip: "车牌号不能为空" },
						{ mode: 'car', tip: "车牌号格式不正确" },
					],
					info: [
						{ required: true, tip: "个人简介不能为空" },
					],
					price: [
						{ required: true, tip: "价格不能为空" },
						{ type: 'float', tip: "价格格式不正确" },
						{ 
							tip: "价格只能在1~100之间",
							validator: ()=> this.form.price >= 1 && this.form.price <= 100,
						},
					],
				},
        }
    },

    //为了兼容小程序，需要在表单创建后，将rules添加到表单。
    onReady() {
        this.$refs['form'].setRules(this.rules)
    },

    methods: {

        // 提交示例
        async handleSubmit(){
            const valid = await this.$refs['form'].validate()

            if(valid){
                // 提交表单
            }
        },
    }
</script>

表单样式

表单一般都有着统一的样式，有时候需要定制某个字段的样式。

(1). 字段名称与字段值不同行展示; 给com-form-item设置:inline="false"

(2). 自定义label样式

<com-form-item prop="price" label="出价">
    <!-- label插槽-->
    <view class="flex" slot="label" @click="showNotice = true">
        <text>出价</text>
        <com-icon name="question-fill" color="orange" size="32" class="mg-x-10"></com-icon>
    </view>
    <com-input v-model="form.price"></com-input>
</com-form-item>

com-form API

com-form Props

属性名	说明	类型	必填	默认值
model	表单值	Object	false	{}
rules	表单校验规则	Object	false	{}

com-form-item Methods

名称	描述	参数
clearTip	清除所有校验提示	-

com-form-item API

com-form-item Props

属性名	说明	类型	必填	默认值
prop	表单的字段key名称	String	false	-
label	字段名称	String	false	-
labelColor	标签文字颜色	String	false	#333
labelWidth	标签文字宽度	String	false	140rpx
inline	标签和值是否展示在一行	Boolean	false	true
required	必填时是否显示 *	Boolean	false	true
errorBorder	错误时是否将字段圈出	Boolean	false	true
border	是否展示下边框	Boolean	false	true
align	值对齐方式	String	false	right

com-form-item Methods

名称	说明	参数
clearTip	清除校验提示	-

com-form-item Slots

名称	说明	默认
label	字段	-
default	-	-