tqApp-webView/pages/formTemplate/formTemplate.vue

<template>
    <view class="form-box">
        <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
        <u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" labelWidth="60">
            <u-form-item label="姓名" prop="userInfo.name" borderBottom :required="true">
                <u--input v-model="model1.userInfo.name" placeholder="请输入姓名" border="none"></u--input>
            </u-form-item>
            <u-form-item label="手机号" prop="userInfo.phone" borderBottom :required="true">
                <u--input v-model="model1.userInfo.phone" placeholder="请输入手机号"  border="none"></u--input>
            </u-form-item>
            <u-form-item label="性别" prop="userInfo.sex" borderBottom @click="showSex = true;" :required="true">
                <u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
                    border="none"></u--input>
                <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
        </u--form>
        <u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
            @close="showSex = false" @select="sexSelect">
        </u-action-sheet>

        <u-button type="primary" class="submit" @click="submit" text="提交"></u-button>
    </view>
</template>

<script>
import { submitForm } from "@/api/formTemplate.js"
export default {
    data() {
        return {
            showSex: false,
            model1: {
                userInfo: {
                    name: 'uView UI',
                    phone: '',
                    sex: '男',
                },
            },
            actions: [{
                name: '男',
            },
            {
                name: '女',
            },
            {
                name: '保密',
            },
            ],
            rules: {
                'userInfo.name': {
                    min: 1,
                    max: 12,
                    type: 'string',
                    required: true,
                    message: '请填写姓名',
                    trigger: ['blur', 'change']
                },
                'userInfo.phone': [{
                    type: 'number',
                    required: true,
                    message: '请填写手机号',
                    trigger: ['blur', 'change']
                }, {
                    type: 'string',
                    required: true,
                    pattern: this.$rule.phone, //正则
                    message: '请填写正确的手机号',
                    trigger: ['blur', 'change']
                }],
                'userInfo.sex': {
                    type: 'string',
                    max: 1,
                    required: true,
                    message: '请选择男或女',
                    trigger: ['blur', 'change']
                },
            },
            radio: '',
            switchVal: false
        };
    },
	onLoad(option) {
		console.log('页面参',option)
	},
    methods: {
        sexSelect(e) {
            this.model1.userInfo.sex = e.name
            this.$refs.uForm.validateField('userInfo.sex')
        },
        async submitForm() {
            console.log('提交')
            let { data } = await submitForm({ ...this.model1.userInfo })
        },
        submit() {
            this.$refs.uForm.validate().then(async res => {
                // this.submitForm()
                uni.$u.toast('校验通过')
            }).catch(errors => {
                uni.$u.toast('校验失败')
            })
        }
    },
    onReady() {
        //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
        this.$refs.uForm.setRules(this.rules)
    },
};
</script>
<style lang="scss" scoped>
.form-box {
    padding: 0 20upx;
    background: #fff;

    .submit {
        margin-top: 80upx;
    }
}
</style>