uniapp中表单校验

<template>
	<view class="example">
		<!-- 自定义表单校验 -->
		<uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData">
			<uni-forms-item label="手机号" required name="phone">
				<uni-easyinput v-model="customFormData.phone" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item label="密码" required name="password">
				<uni-easyinput v-model="customFormData.password" placeholder="请输入密码" type="password"/>
			</uni-forms-item>
			<uni-forms-item label="确认密码" required name="subpassword">
				<uni-easyinput v-model="customFormData.subpassword" placeholder="请再次输入密码" type="password"/>
			</uni-forms-item>
		</uni-forms>
			<button type="primary" @click="submit('customForm')" style="background-color:#67C23A;" size="default">确认</button>
			<navigator url="/pages/login/login" hover-class="navigator-hover" class="to">
				<text>点击登录</text>
			</navigator>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				customFormData: {
					phone:'',
					password:'',
					subpassword:''
				},
				// 自定义表单校验规则
				customRules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: '手机号码不能为空'
								},
								{
									pattern: /^[1]([3-9])[0-9]{9}$/,
									errorMessage: '手机号不合法！'
								}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
								}]
					},
					subpassword: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
								}]
					},
				},
			}
		},
		methods:{
			submit(ref) {
				this.$refs[ref].validate().then(async res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
					if(res.password!== res.subpassword){
						
						uni.showToast({
							icon:'error',
							title: `两次密码不一致`
						})
					}
					console.log(this.customFormData)
					var data = this.customFormData
					data.tel = data.phone
					data.pwd = data.password
					console.log(data)
					delete data.phone
					delete data.password
					delete data.subpassword
					const result = await this.$http({url:'/s-user/updatePwd',method:'post',data:this.customFormData})
					console.log(result)
					if(result.data.code===500){
						uni.showToast({
							title: `${result.data.message}`,
							icon: 'error'
						});
					}
					else if(result.data.code===200){
						uni.showToast({
							title: `${result.data.message}`,
							icon: 'success'
						});
						uni.navigateTo({
							url:"/pages/login/login"
						})
					}else{
						uni.showToast({
							title: '服务器bug',
							icon: 'error'
						});
					}
				}).catch(err => {
					console.log('err', err);
					})
				}
		}
	}
</script>

<style lang="scss">

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
	.getcode{
		display: block;
		margin-top:-70rpx;
		margin-left:350rpx;
		width:200rpx;
	}
	.to{
		margin-top: 20rpx;
		text-align: center;
	}
</style>