vue3之Form表单

Form表单

需知：el-form 绑定 表单对象(:model="form")和规则对象(:model="form")

知识点一：数据双向绑定才可填写内容

<script setup>
    import {ref} from 'vue'
    //创建一个对象（表单对象）
    const form=ref({
        username: '',
        password: '',
        check: ''
    })
</script>

<template>
    <el-form :model="form">
    	//基本格式
        <el-form-item>
            <el-input placeholder="请输入姓名" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item>
            <el-input placeholder="请输入密码" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
            <el-input placeholder="请再次输入密码" v-model="form.check"></el-input>
        </el-form-item>
    </el-form>
</template>

补充说明

指定表单中的数据对象(el-form)=>:model="form"

<el-form :model="form">
	...
</el-form>

指定具体表单对象=>v-model="form.username"

<el-form-item>
    <el-input placeholder="请输入姓名" v-model="form.username"></el-input>
</el-form-item>

知识点二：表单的验证

---常规配置（姓名+密码）

<script setup>
    import {ref} from 'vue'
    //创建一个对象（表单对象）
    const form=ref({
        username: '',
        password: '',
        check: ''
    })
    
    // 定义表单校验规则
    const rules ={
        username: [
            {
                required: true, // 默认表单字段不能为空
                message: '姓名不能为空', // 提示语句
                trigger: 'blur' // trigger含义是鼠标离开就触发
            },
            {
                min: 5,
                max: 16,
                message: '长度为5~16位非空字符', // 提示语句
                trigger: 'blur' // trigger含义是鼠标离开就触发
            }
        ],
        password: [
            {
                required: true, // 默认表单字段不能为空
                message: '密码不能为空', // 提示语句
                trigger: 'blur' // trigger含义是鼠标离开就触发
            },
            {
                min: 5,
                max: 16,
                message: '长度为5~16位非空字符', // 提示语句
                trigger: 'blur' // trigger含义是鼠标离开就触发
            }
        ]
    }
</script>
 
<template>
    <el-form :model="form" :rules='rules'>
        <el-form-item prop="username">
            <el-input placeholder="请输入姓名" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input placeholder="请输入密码" v-model="form.password"></el-input>
        </el-form-item>
    </el-form>
</template>

补充说明

script中定义表单校验规则=>rules

const rules = {
    对象: [
        { required: true, message:'信息', trigger:'blur' }    //规则定义1
        { min: 5, max: 6, message:'信息', trigger:'blur'}     //规则定义2
    ]
}

指定具体表单对象=>:rules='rules'

<el-form :rules='rules'>
	...
</el-form>

指定具体对象的验证规则(el-form-item)=>prop="username"

<el-form-item prop="username">
     <el-input placeholder="请输入姓名" v-model="form.username"></el-input>
</el-form-item>

密码框——显示与不显示

type="password" ：将密码变为点，隐蔽

show-password：眼睛，用于显示与否的操作

<template>
    ....
	<el-form-item class="pwdInp" prop="password" >
		<el-input v-model="form.username" placeholder="请输入用户名" type="password" show-password>
    		<!-- 图标 -->
    		// #prefix：前缀; #suffix：后缀。
        	<template #prefix>
        		<el-icon><Lock /></el-icon>
        	</template>
		</el-input>
	</el-form-item>
    ....
</template>

---自定义配置（再次输入密码）

<script setup>
    import {ref} from 'vue'
    // 创建一个对象（表单对象）
    const form=ref({
        username: '',
        password: '',
        check: ''
    })

    // 自定义验证规则
    // rule 规则，value 值，callback 回调函数
    const checkPassword=(rule,value,callback)=>{
        //...自定义校验逻辑
        if(value===''){
            callback(new Error('请再次输入密码'))
        }else if(value !== form.value.password){
            callback(new Error('请确保两次输入的密码一致'))
        }else{
            callback();
        }
    }

    // 定义表单校验规则
    const rules ={
        check: [
            {
                validator: checkPassword,
                trigger: 'blur' // trigger含义是鼠标离开就触发
            }
        ]
    }

</script>

<template>
    <el-form :model="form" :rules='rules'>
        <el-form-item prop="check">
            <el-input placeholder="请再次输入密码" v-model="form.check"></el-input>
        </el-form-item>
    </el-form>
</template>

补充说明

基本格式

const 函数名=(rule,value,callback)=>{
        //...自定义校验逻辑
}

const rules = {
    对象: [
        {    
            validator: 函数名,
            trigger: 'blur' // trigger含义是鼠标离开就触发
         }
    ]
}

指定具体表单对象=>:rules='rules'

<el-form :rules='rules'>
	...
</el-form>

指定具体对象的验证规则(el-form-item)=>prop="username"

<el-form-item prop="username">
     <el-input placeholder="请输入姓名" v-model="form.username"></el-input>
</el-form-item>