公司的一个老项目，又要重新上架，uniapp一套代码，打包生成iOS端发布到App Store，安卓端发布到腾讯应用宝、OPPO、小米、华为、vivo，安卓各大应用市场上架要求不一样，可真麻烦啊

光一个表单校验，就整了半天，以前用的都是element-ui的，现成的组件，这有换成uni-form的，记录一下怎么用的，还用到了uni-data-picker选择器（不过只能两级，得搞个方法封装一下能多级

包括：必填校验，手机号校验，身份证号校验，邮箱校验

 

带required的就是有校验
name要对应model里的值，要统一

// 限制只能输入数字
{
    format: 'number',
    errorMessage: '企业规模请输入数字'
}

// 手机号校验
{
    pattern: /^1[0-9][0-9]\d{8}$/,
    errorMessage: '请输入正确的手机号码'
}

// 身份证号校验
{
    pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
    errorMessage: '请输入正确的身份证号码'
}

// 邮箱校验
{
    format: 'email',
    errorMessage: '请输入正确的邮箱'
}

demo代码

<template>
	<view class="curr_main">
		<view>
			<uni-forms :modelValue="formData" ref="uniForm" :rules="uniRules">
				<uni-forms-item class="cu-form-group" label="企业名称：" name="enterpriseName" required>
					<input type="text" v-model="formData.enterpriseName" placeholder="请输入企业名称" />
				</uni-forms-item>
				<uni-forms-item class="cu-form-group" label="企业简称：" name="enterpriseShortName" required>
					<input type="text" v-model="formData.enterpriseShortName" placeholder="请输入企业简称" />
				</uni-forms-item>
				<uni-forms-item class="cu-form-group" label="企业规模：" name="enterpriseScale" required>
					<input v-model="formData.enterpriseScale" placeholder="请输入企业规模(人)" />
				</uni-forms-item>
				<uni-forms-item class="cu-form-group" label="联系电话：" name="phone" required>
					<input type="text" v-model="formData.phone" placeholder="请输入联系电话" />
				</uni-forms-item>
				<uni-forms-item class="cu-form-group" label="企业所在城市：" name="districtId" required>
					<uni-data-picker placeholder="请选择企业所在城市" popup-title="请选择企业所在城市" :localdata="cityTree" v-model="formData.districtId" @change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item class="cu-form-group" label="详细地址：" name="phone">
					<textarea maxlength="-1" @input="textareaBInput" v-model="formData.address" placeholder="请输入详细地址"></textarea>
				</uni-forms-item>
				<uni-forms-item class="cu-form-group margin-top" label="姓名：" name="legalName" required>
					<input type="text" v-model="formData.legalName" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item class="cu-form-group" label="身份证号码：" name="legalPassNumber" required>
					<input type="text" v-model="formData.legalPassNumber" placeholder="请输入身份证号" />
				</uni-forms-item>
                <uni-forms-item class="cu-form-group" label="邮箱：" name="email" required>
					<input type="text" v-model="formData.email" placeholder="请输入邮箱" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="flex justify-between padding-sm bg-fff">
			<button class="cu-btn round button-primary width-48" style="width:100%" @click="submit()">提交</button>
		</view>
	</view>
</template>
<script>
	export default{
		data(){
			return{
				pickerData: '',
				formData: {
					districtId: '',
					enterpriseName: '',
					enterpriseShortName: '',
					enterpriseCertificateType: '',
					certificateCode: '',
					enterpriseScale: '',
					phone: '',
					address: '',
					legalName: '',
					legalPassType: '',
					legalPassNumber: '',
					id: uni.getStorageSync('userId'),
                    email: ''
				},
				cityTree: [],
				uniRules: {
					enterpriseName: {
						rules: [{
							required: true,
							errorMessage: '请输入企业名称',
						}]
					},
					enterpriseShortName: {
						rules: [{
							required: true,
							errorMessage: '请输入企业简称',
						}]
					},
					districtId: {
						rules: [{
							required: true,
							errorMessage: '请选择企业所在城市',
						}]
					},
					enterpriseScale: {
						rules: [
							{
								required: true,
								errorMessage: '请输入企业规模'
							},
							{
								format: 'number',
								errorMessage: '企业规模请输入数字'
							}
						]
					},
					phone: {
						rules: [
							{
								required: true,
								errorMessage: '请输入联系电话',
							},
							{
								pattern: /^1[0-9][0-9]\d{8}$/,
                                errorMessage: '请输入正确的手机号码'
							}
						]
					},
					legalName: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					legalPassNumber: {
						rules: [
                            {
                                required: true,
                                errorMessage: '请输入身份证号码',
                            },
                            {
                                pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                                errorMessage: '请输入正确的身份证号码'
                            }
                        ]
					},
                    email: {
						rules: [
							{
								required: true,
								errorMessage: '请输入邮箱',
							},
							{
								format: 'email',
								errorMessage: '请输入正确的邮箱'
							}
						]
					},

				},
			}
		},
		components:{

		},
		onLoad(params) {
			this.getCity()
		},
		methods:{
			onnodeclick(e) {
				this.formData.districtId = e.id
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
			},
			getCity(){
                let areaRows = [
                    {
                        "id": 130000,
                        "status": 1,
                        "creator": null,
                        "creationTime": null,
                        "modifier": null,
                        "modificationTime": null,
                        "districtName": "河北省",
                        "districtShortName": "河北省",
                        "parentId": 0,
                        "level": 1,
                        "sortNumber": 30,
                        "cities": [
                            {
                                "id": 130100,
                                "status": 1,
                                "creator": null,
                                "creationTime": null,
                                "modifier": null,
                                "modificationTime": null,
                                "districtName": "石家庄市",
                                "districtShortName": "石家庄",
                                "parentId": 130000,
                                "level": 2,
                                "sortNumber": 10,
                                "cities": [
                                    {
                                        "id": 130100,
                                        "status": 1,
                                        "creator": null,
                                        "creationTime": null,
                                        "modifier": null,
                                        "modificationTime": null,
                                        "districtName": "和平区",
                                        "districtShortName": "和平区",
                                        "parentId": 130001,
                                        "level": 3,
                                        "sortNumber": 10,
                                        "cities": null
                                    },
                                ]
                            },
                        ]
                    },
                    {
                        "id": 140000,
                        "status": 1,
                        "creator": null,
                        "creationTime": null,
                        "modifier": null,
                        "modificationTime": null,
                        "districtName": "山西省",
                        "districtShortName": "山西省",
                        "parentId": 0,
                        "level": 1,
                        "sortNumber": 40,
                        "cities": [
                            {
                                "id": 140100,
                                "status": 1,
                                "creator": null,
                                "creationTime": null,
                                "modifier": null,
                                "modificationTime": null,
                                "districtName": "太原市",
                                "districtShortName": "太原市",
                                "parentId": 140000,
                                "level": 2,
                                "sortNumber": 10,
                                "cities": null
                            },
                        ]
                    }
                ]
                areaRows?.map((item, index) => {
                    item.text = item.districtName;
                    item.value = item.id;
                    item.children = item.cities;
                    item.children?.map((el, inde) => {
                        el.text = el.districtName;
                        el.value = el.id;
                        item.children = item.cities
                    });
                });
                console.log(areaRows);
                // 试了下，只能两层
                this.cityTree = areaRows
			},
			textareaBInput(e) {
				this.textareaBValue = e.detail.value
			},
			submit(){
				console.log(this.formData);
				this.$refs.uniForm.validate().then(res=>{
					console.log('表单数据信息：', res);
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
		},

	}
</script>
<style lang="scss">
</style>