效果图:

代码:

<template>
	<view class="container">
		<view class="form">
			<uni-forms ref="form" :modelValue="formData" :rules="rules" label-width="80px" label-align="left"
				:border="true">
				<uni-forms-item label="姓名" name="name">

					<uni-easyinput v-model="formData.name" type='text' placeholder="请输入您的姓名" maxlength='13'
						:inputBorder="false" @input='userInputOne' />

				</uni-forms-item>
				<uni-forms-item label="手机号码" name="mobile">

					<uni-easyinput v-model="formData.mobile" type='number' placeholder="请输入您的手机号码" maxlength='11'
						:inputBorder="false" @input='userInputTow' />

				</uni-forms-item>
				<uni-forms-item label="单位名称" name="company">

					<uni-easyinput v-model="formData.company" type='text' placeholder="请输入您的单位名称" maxlength='20'
						:inputBorder="false" @input='userInputThree' />

				</uni-forms-item>
				<uni-forms-item label="所在地区" name="location">
					<uni-data-picker placeholder="请选择您所在的地区" popup-title="请选择所在地区" :localdata="areaDate"
						@change="onchange">
					</uni-data-picker>
				</uni-forms-item>


			</uni-forms>
		</view>
		<view class="btn-wrap">
			<button class="btnSubmit" @click="finDCertificate">提交</button>
		</view>
	</view>
</template>
<script>
	import {
		certificate,
		area,
		trainRegister
	} from '@/api/user'


	export default {
		data() {
			return {
				formData: {
					name: '',
					mobile: '',
					company: '',
					location: '',
				},
				areaDate: [],
			}
		},
		onLoad() {
			let that = this
			// // // 引入json文件
			// let dnf = require('../../utils/city-china.json')
			// this.areaDate = dnf
			area().then((res) => {
				const {
					data
				} = res
				// console.log(data);
				that.areaDate = data
			})
		},
		methods: {
			onchange(e) {
				// console.log('onchange:', e);
				const {
					detail
				} = e
				const res = detail.value
				const adress = res[0].text + res[1].text + res[2].text
				this.formData.location = adress
			},
			userInputOne(e) {
				const {
					name,
				} = this.formData

				if (name != '') {
					// let reg = /^[\u4e00-\u9fa5]{1,13}$/
					const reg = /^(?:[\u4e00-\u9fa5·]{1,13})$/
					const result = reg.test(name)
					if (result == false) {
						this.$nextTick(() => {		
							this.formData.name = name.replace(/[^\u4e00-\u9fa5]/g, '')
						})
					}

				}

			},

			userInputTow(e) {
				const {
					mobile,
				} = this.formData

				if (mobile != '') {
					
					let reg = /^1[0-9]{0,10}$/

					const result = reg.test(mobile)

					if (result == false) {
						this.$nextTick(() => {
							this.formData.mobile = mobile.replace(/\D/g,'')
						})
					}.0
				}
			},
			userInputThree(e) {
				const {
					company,
				} = this.formData
				if (company != '') {
					// let reg = /^[\u4e00-\u9fa5]{1,30}$/
					const reg = /^(?:[\u4e00-\u9fa5·]{1,30})$/
					const result = reg.test(company)

					if (result == false) {
						this.$nextTick(() => {
							this.formData.company = company.replace(/[^\u4e00-\u9fa5]/g,'')
						})
					}
				}
			},
			finDCertificate() {
				const {
					name,
					mobile,
					company,
					location
				} = this.formData

				if (!name) {
					uni.showToast({
						title: '请输入您的姓名',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!mobile) {
					uni.showToast({
						title: '请输入您的手机号码',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!company) {
					uni.showToast({
						title: '请输入您的单位名称',
						icon: 'none',
						duration: 2000
					})
					return
				}


				if (!location) {
					uni.showToast({
						title: '请选择您所在的地区',
						icon: 'none',
						duration: 2000
					})
					return
				}


				const result = trainRegister({
					name: this.formData.name,
					mobile: this.formData.mobile,
					company: this.formData.company,
					location: this.formData.location
				}).then((res) => {
					if (res.code == 1) {
						uni.reLaunch({
							url: '/subpkg/applySuccess/applySuccess'
						});
					}
				}).catch((err) => {
					uni.showToast({
						title: '提交失败',
						icon: 'none',
						duration: 2000
					})
					return
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	.container {
		height: 100%;
		position: relative;

		.form {
			padding: 0 30rpx;
			padding-right: 0;
			background-color: #ffffff;
			border-top: 1px solid #ebebeb;
			// border-bottom: 1px solid #ebebeb;
		}

		.btn-wrap {
			position: absolute;
			font-size: 36rpx;
			bottom: 10%;
			width: 100%;

		}

		.btnSubmit {
			color: #ffffff;
			width: 690rpx;
			border-radius: 10rpx;
			font-size: 36rpx;
			background-color: #df3535;
		}
			
		/deep/ .uni-forms-item--border:nth-child(1){
			border: none !important;
		}

		/deep/.is-first-border {
			border: none;
		}

		/deep/ .uni-forms-item--border {
			border-top: 1px solid #ebebeb;
		}

		/deep/ .uni-easyinput__content-input {
			text-align: right;
			font-size: 28rpx !important;
			// color: #999999;
		}

		/deep/ .uni-easyinput__content {
			padding-right: 31rpx;
		}

		/deep/ .input-value-border {
			border: none;
		}

		/deep/ .input-value {
			display: flex;
			padding-right: 31rpx;
		}

		/deep/ .selected-area {
			display: flex;
			justify-content: flex-end;
		}

		/deep/ .input-arrow {
			width: 8px;
			height: 8px;
			border-left: 1.3px solid #6f6f6f;
			border-bottom: 1.3px solid #6f6f6f;
			margin-top: 9px;
			transform: rotate(270deg);
		}

		/deep/ .selected-list {
			justify-content: flex-end;

			.text-color {
				font-size: 28rpx !important;
				// color: #999999;
			}

		}

		/deep/ .uni-icons {
			display: none;
		}

	}
</style>