Vue使用表单验证用户名和密码

功能描述：实现输入用户名和密码不合法时提前弹出提示
表单样式：

基本功能：
为空时提示：

长度不合法时提示：

表单输入文本框代码：

<el-form :model="user" :rules="rules">
    <el-form-item prop="username"><!--对应user.username-->
        <!--输入框 v-model通常用于input的双向数据绑定 ,也可以实现子组件到父组件数据的双向数据绑定-->
        <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user"
                  v-model="user.username"></el-input>
    </el-form-item>
    <!--密码-->
    <el-form-item prop="password"><!--对应user.password-->
        <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-password
                  v-model="user.password"></el-input>
    </el-form-item>
</el-form>

注意：

1. el-form>:model>[user]>username
2. el-form-item>prop>[username]
3. el-input>v-model>[user.username]
4. rules>[username]

以上四个地方出现的 username 名称必须一样（指拼写）

JavaScript代码：

<script>
    export default {
        name: "Login",
        data() {
            return {
                user: {},
                rules: {
                    // usn和prop对应
                    username: [
                        // blur表示鼠标失焦时触发
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
                    ]
                }
            }
        }
	}
</script>