Vue学习（四）登陆页面之数据绑定和数据验证

添加组件

首先打开Element-UI，在其中选择需要的组件进行添加。

1. 添加Form表单

点击显示代码，粘贴代码即可。

这里我们按需复制，复制前几行即可。自己加上结尾标签。

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
</el-form>

然后粘贴到login组件中，并对代码进行修改。

<!-- 登陆表单区域 -->            
<el-form label-width="80px">         
     <!-- 用户名 -->          
     <el-form-item label="用户名">           
	<el-input ></el-input> 
     </el-form-item>             
     <!-- 密码 -->              
     <el-form-item label="密码">                
        <el-input ></el-input>              
     </el-form-item>          
</el-form>

此时查看效果，发现报错
查看错误原因，是因为访问不到那些复制进来的标签元素。
所以要在plugins下的elements.js中引入需要的组件元素。
注意同一个组件引入的元素要写在一起，最后要留一个空行

import Vue from 'vue'
import { Button, Form, FormItem, Input } from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

添加成功

2. 添加按钮

一样的去Element-UI复制需要组件元素的代码，添加到login组件中

<!-- 按钮区域 -->         
<el-form-item>                
	<el-button type="primary">登陆</el-button>                
	<el-button type="info">重置</el-button>              
</el-form-item>

然后对整个表单区域和按钮区域添加样式表，美化界面。

.btns{
    display: flex;    
    justify-content: flex-end;  
}  
.loginform{
    position: absolute;    
    bottom: 0;    
    width: 100%;    
    padding: 0 20px;    
    box-sizing: border-box;  //默认是border-maincontent
}

3. 添加icon图标

可以直接使用网站提供的，直接加入类似prefix-icon="el-icon-search"即可。
也可以使用第三方图标库阿里图标库。选择所有想要的图标，然后选择代码下载。将下载好的文件放在assets下。打开文件中的demo网页，按照网页中所给的教程添加图标。
这里选择的是入口文件main.js中导入，import './assets/font/iconfont.css' 然后在login组件中加入图标。

<el-form-item label="用户名">
	<el-input prefix-icon="iconfont icon-laoyonghu"></el-input>
</el-form-item>
<el-form-item label="密码">
        <el-input  prefix-icon="iconfont icon-mima"></el-input>              </el-form-item>

效果如下

表单的数据绑定

去element-ui中查看表单组件，表单代码<el-form ref="form" :model="form" label-width="80px">中的model代表数据绑定，即在Form中填写的所有数据都会同步到model对象form中，这个model对象定义在行为区data数据中。

<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

接着在表单框中绑定数据对象的具体属性<el-input v-model="form.name"></el-input>即可。

编写代码

首先是登陆表单，添加model绑定对象loginform

 <el-form : model="loginform" label-width="60px" class="loginform">

其次是行为区数据data里定义logimform的具体属性

<script>
export default {
  data(){    
     return{      
        loginform:{        
  	  username:'账号',        
  	  password:'密码'      
  	}    
     }  
  }
 }
</script>

然后表单中每一个数据项绑定loginform的具体属性

<el-input v-model="loginform.username" prefix-icon="iconfont icon-laoyonghu"></el-input>
'''
<el-input v-model="loginform.password" prefix-icon="iconfont icon-mima"></el-input>

运行

与数据成功绑定，密码那一栏可以在<el-input>中加上type="password"显示**。

表单的数据验证

去element-ui查看表单验证。

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator

编写代码

首先在<el-form> 通过属性绑定指定一个校验对象

<el-form :model="loginform" :rules="loginrules" label-width="60px" class="loginform">

接着在data数据中定义校验对象，每一个属性都是校验规则

loginrules: {    
    username: [        
      { required: true, message: '请输入账号', trigger: 'blur' },       
      { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
    ],        
    password: [          
      { required: true, message: '请输入密码', trigger: 'blur' },        
      { min: 3, max: 9, message: '长度在 3 到 9 个字符', trigger: 'blur' }
    ]      
 }

然后在不同的item表单里通过prop指定校验规则。

<el-form-item label="用户名" prop="username">
'''
<el-form-item label="密码" prop="password">

运行

登陆前的预校验

去element-ui查看Form表单。其中form methods中有validate方法可进行校验。

首先需要拿到表单的实例对象，即<el-form>的实例对象。在el-form中添加<el-form :ref="loginref"即可。这里loginref就是表单的实例对象，获取到loginform就可以调用上图中的函数。
因为要登陆前进行预验证，所以点击登陆按钮时，需要调用一个函数。要为登陆按钮绑定一个事件。找到登陆按钮所在代码，<el-button type="primary" @click="login">登陆</el-button>绑定一个login事件。接下来需要定义这个login函数。
在行为区找到method节点，在其中定义函数。

methods: {  
  login() {     
   this.$refs.loginref.validate((valid) => {      
     console.log(valid);      
   })    
  } 
}

获取表单的实例对象loginref，然后调用validate，在这个函数里调用一个回调函数，其中第一个形参是bool值，我们通过打印判断是否验证成功。
运行
在初始化界面时就已经报错。通过查看this，发现refs中没有我们定义的loginref
原因是<el-form ref="loginref"ref前不需要加：。改正之后运行

this中refs中有了我们定义的loginref了，而且预验证成功，账号密码格式满足要求后点击登陆显示了true。