uniapp form表单校验

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

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

包括:必填校验,手机号校验,身份证号校验,邮箱校验

带required的就是有校验

name要对应model里的值,要统一

javascript 复制代码
// 限制只能输入数字
{
    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代码

javascript 复制代码
<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>
相关推荐
web1508509664112 小时前
在uniapp Vue3版本中如何解决webH5网页浏览器跨域的问题
前端·uni-app
何极光1 天前
uniapp小程序样式穿透
前端·小程序·uni-app
User_undefined1 天前
uniapp Native.js 调用安卓arr原生service
android·javascript·uni-app
流氓也是种气质 _Cookie1 天前
uniapp blob格式转换为video .mp4文件使用ffmpeg工具
ffmpeg·uni-app
爱笑的眼睛112 天前
uniapp 极速上手鸿蒙开发
华为·uni-app·harmonyos
鱼樱前端2 天前
uni-app框架核心/常用API梳理一(数据缓存)
前端·uni-app
阿琳a_2 天前
解决uniapp中使用axios在真机和模拟器下请求报错问题
前端·javascript·uni-app
三天不学习2 天前
uni-app 跨端开发精美开源UI框架推荐
ui·uni-app·开源
多客软件佳佳2 天前
便捷的线上游戏陪玩、线下家政预约以及语音陪聊服务怎么做?系统代码解析
前端·游戏·小程序·前端框架·uni-app·交友
洗发水很好用2 天前
uniApp上传文件踩坑日记
uni-app