uniapp中用vue3实现表单校验

最新推荐文章于 2025-12-07 18:25:55 发布

原创最新推荐文章于 2025-12-07 18:25:55 发布 · 4k 阅读

本内容遵循CC 4.0 BY-SA版权协议

该代码段展示了使用uni-app框架创建的一个登录页面，包括用户名、密码和验证码输入框，以及表单验证功能。当用户点击登录按钮时，会触发验证过程，如果表单有效，则调用login函数进行登录操作。

<template>
	<view class="box">
		<view class="login_card">
			<view class="title">智能制造管理系统</view>
			<uni-forms class="forms" :model="form" ref="formRole">
				<uni-forms-item name="username" :rules="[{ required: true, errorMessage: '请输入用户名' }]">
					<uni-easyinput prefixIcon="person-filled" type="text" v-model="form.username" placeholder="请输入用户名"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="password" :rules="[{ required: true, errorMessage: '请输入密码' }]">
					<uni-easyinput prefixIcon="locked-filled" type="password" v-model="form.password" placeholder="请输入密码"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="code" :rules="[{ required: true, errorMessage: '请输入验证码' }]">
					<uni-easyinput class="left" prefixIcon="checkbox"  v-model="form.code"  placeholder="请输入验证码" ></uni-easyinput>	
				</uni-forms-item>
				<button @click="submit" class="btn">登入</button>
			</uni-forms>
		</view>
	</view>
</template>
   
<script setup lang="ts">
import { reactive, ref, onMounted, computed, watch } from 'vue';
const formRole = ref<any>(null);
const form = reactive({
	username: null,
	password: null,
	code:null,
	uuid: null
});
const submit = async () => {
	formRole.value.validate().then(async ({ valid, errors }: any) => {
		if (valid) {
		} else {
            //验证成功
			login(form).then((res) => {
				console.log(res)
			});
		}
	});
};
</script>

标签

#uni-app #vue.js