# 1 07.登录表单验证处理

> 接上篇，我们登录界面已经完成了，但是用户登录输入的账户密码需要做一些验证，也是减少和后端的交互

* 例如： 登录表单验证
  * prop 关联验证字段
  * rules 验证规则
  * ref 反向

```js
// login.vue


...略

<el-form ref="formRef" :rules="rules" :model="form" class="w-[250px]">
    <el-form-item prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名">
            <template #prefix>
                <el-icon><User /></el-icon>
            </template>
        </el-input>
    </el-form-item>
    <el-form-item prop="password">
        <el-input type="password" v-model="form.password" placeholder="请输入用户密码" show-password>
            <template #prefix>
                <el-icon><Lock /></el-icon>
            </template>
        </el-input>
    </el-form-item>
    <el-form-item>
        <el-button round color="#626aef" class="w-[250px] round" type="primary" @click="onSubmit">登录</el-button>
    </el-form-item>
</el-form>


...略


<script setup>
import { ref, reactive } from 'vue'

// do not use same name with ref
const form = reactive({
  username: '',
  password: '',

})

// 定义验证规则
const rules = {
    username: [
        {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur',
        },
    ],
    password: [
        {
            required: true,
            message: '密码不能为空',
            trigger: 'blur',
        },
    ]
}

// 点击登录验证
const formRef = ref(null)

const onSubmit = () => {
    formRef.value.validate((valid) => {
        if (!valid) {
            console.log('error')
        }
        console.log(valid)
    })
}
</script>

...略
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://close.gitbook.io/yun-wei-bi-ji/centos/vue/xiang-mu/1-07.-deng-lu-biao-dan-yan-zheng-chu-li.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.