Vue从零开始开发管理系统（学习笔记第二节）

前言

本节笔记记录了如何完善这个管理系统的登录页面。

主要实现为表单添加登录前的校验规则。

---

一、为表单添加校验规则

1. 首先在el-form中添加:rules='LoginFormRules'的参数。
2. 在data数据中心中增加LoginFormRules:{}。
3. 在LoginFormRules中编写具体的规则

               LoginFormRules:{
                   username:[
                       {required:true,message:'请输入用户名',trigger:'blur'},
                       {min:3,max:10,message:'长度在3和10个字符',trigger:'blur'}
                   ],
                   password:[
                       {required:true,message:'请输入密码',trigger:'blur'},
                       {min:3,max:10,message:'长度在3和10个字符之间',trigger:'blur'}
                   ]
               }

   写法为：

   变量名:[

     {required:是否为必须,message:'提示信息',trigger:'当什么时候出现'},

     {min:最小长度,max:最大长度,message:'提示信息',trigger:'当什么时候出现'}

   ]

   其中blur为鼠标失去焦点时。

4.  在el-form-item中添加prop传值。
5. 注意如果出现无法校验的情况，请检查数据中心中的字段名和prop传值是否一致。

二、为表单添加重置功能

1. 在el-form中添加ref标识，ref='LoginFormRef'
2. 在methods中编写方法：

   restcheck(){
       this.$refs.LoginFormRef.restFields()
   }

3. 将restcheck方法绑定至重置button上。 

三、将数据中心重写

1. 在data数据中心中将username和password写在同一个数组中。

               form:{
                   username:'',
                   password:''
               }

2. 在el-form中添加:model='form'，再在el-form-item中添加v-model为form.username和form.password的格式。

                  <el-form :rules="LoginFormRules" :model="form" ref="LoginFormRef">
                       <el-form-item prop="username">
                           <el-input clearable v-model="form.username"></el-input>
                       </el-form-item>
                       <el-form-item prop="password">
                           <el-input show-password v-model="form.password"></el-input>
                       </el-form-item>
                       <el-form-item style="display:flex; justify-content: flex-end">
                           <el-button type="primary">登录</el-button>
                           <el-button type="info" @click="restcheck()">重置</el-button>
                       </el-form-item>
                   </el-form>

    

---

总结