vue3+element-ui 登录配置表单

详情请看element官方文档

<script setup>
// 表单校验 （账号+密码+勾选栏+按钮）
import { ref } from "vue";
// 准备表单对象
const form = ref({
    account: '',
    password:'',
    // 自定义表单->勾选栏
    agree: true
})
// 准备规则对象
const rules = {
    account:[
    // required：是否为空true不为空 
    // messa：提示信息  
    // trigg：触发事件（blur失去焦点时触发）
    // min： 最短字符
    // max 最长字符
        { required: true, message: '用户名不能为空', trigger: 'blur'}
    ],
    password:[
        { required: true, message: '密码不能为空', trigger: 'blur'},
        { min:6, max:14, message: '密码为6~14位', trigger: 'blur'}
    ],
    // 自定义新规则
    agree:[
        {validator:(rule,value,callback)=>{
            // console.log(value); // true  false
            // 自定义校验逻辑
            // 勾选就通过 不勾选就不通过
            if(value){
                callback()
            }else{
                callback(new Error('请勾选协议'))
            }

        }}
    ]   
}

// 登录按钮部分
// 获取form实例做统一校验
const formRef = ref(null)
// 点击登录
const doLogin = ()=>{
// 调用实例方法
formRef.value.validate((valid)=>{
    // element-ui valid 所有表单都通过校验 才为true
    // console.log(valid);
    // 以valid为判断条件
    if(valid){
        // 登录函数
		
    }

})
}


</script>
<template>
<div class="form">
	<!-- :model = v-model 绑定form对象 -->
	<!-- :rules规则对象 -->
	<!-- ref 绑定整个实例 -->
	<el-form 
	 ref="formRef"
	:model="form"
	:rules="rules"
	
	label-position="right" 
	label-width="60px"
	 status-icon>
		<!-- prop绑定校验对象->rules里的对象 -->
		<el-form-item prop="account" label="账户">
			<!-- v-model绑定表单对象->form里的对象 -->
			<!-- @blur="() => {form.account=form.account.trim()}" 清除空格 -->
			<!-- v-model.trim="value" 去除空格 -->
			<el-input  v-model="form.account"  @blur="() => {form.account=form.account.trim()}" />
		</el-form-item>
		<!-- prop绑定校验对象->rules里的对象 -->
		<el-form-item prop="password" label="密码">
			<!-- v-model绑定表单对象->form里的对象 -->
			<el-input v-model.trim="form.password" />
		</el-form-item>
		<el-form-item prop="agree" label-width="22px">
			<el-checkbox v-model="form.agree" size="large">
			我已同意隐私条款和服务条款
			</el-checkbox>
		</el-form-item>
		<el-button 
		@click="doLogin"
		size="large"
		class="subBtn">点击登录</el-button>
	</el-form>
</div>
</template>

小tips：required为true时，required为false时