【uniapp vue3 表单校验】

uniapp vue3 表单校验 账号密码不能为空

1. 先创建一个表单

 <uni-forms class="forms" ref="valiForm" :rules="rules" :model="valiFormData">
				<!-- 账号 -->
				<uni-forms-item class="formsitem" label="" name="user" >
					<input required class="input" type="text" v-model="valiFormData.user" placeholder="请输入账号" />
				</uni-forms-item>
				<!-- 密码 -->
				<uni-forms-item class="formsitem" label="" name="password" style="position: relative" >
					<input required class="input" :type="showPassword ? 'text' : 'password'"
						v-model="valiFormData.password" placeholder="请输入密码" />
					<image class="eye" mode="widthFix"
						:src="showPassword ? '../../static/login/tabbar/eye.svg' : '../../static/login/tabbar/closeeye.svg'"
						@click="togglePasswordVisibility"></image>
				</uni-forms-item>
			</uni-forms>

2. 定义校验规则

 const rules = ref({
		user: {
			rules: [{
				required: true,
				errorMessage: '用户名不能为空',
				trigger: 'blur'
			}]
		},
		password: {
			rules: [{
				required: true,
				errorMessage: '密码不能为空',
				trigger: 'blur'
			}, ]
		}
	});

3. 提交

 <view class="button-container">
				<button type="primary" class="btn-class" @click="submit">登录</button>
			</view>

const valiForm = ref()
	//登录方法
	const submit = () => {
		valiForm.value.validate().then((res)=>{
		//其他操作
				})
	}

4.结果