代码：

    <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" class="demo-ruleForm" ><el-form-item prop="username"><el-input placeholder="用户名" v-model="loginForm.username"></el-input></el-form-item><el-form-item prop="password"><el-input type="password" placeholder="密码" v-model="loginForm.password" @keyup.enter.native="loginIn"></el-input></el-form-item><div class="login-btn"><el-button @click="goLoginUp">注册</el-button><el-button type="primary" @click="loginIn">登录</el-button></div></el-form>

参数	说明
model	存储表单数据对象
status-icon	是否在输入框中显示校验结果反馈图标(默认值:false，显示)
rules	表单验证规则(对model对象验证)
prop	传入 Form 组件的 model 中的字段
placeholder	输入框占位文本(背景文字)
v-model	实时传递输入框内值的的触发事件
@keyup.enter	触发回车事件

  data: function () {// 对用户名进行校验var validateName = (rule, value, callback) => {if (!value) {return callback(new Error('请输入用户名'))} else {callback()}}// 对密码进行校验var validatePassword = (rule, value, callback) => {if (value === '') {return callback(new Error(('请输入密码')))} else {callback()}}return {// 登录用户名密码loginForm: {username: '',password: ''},rules: {username: [////trigger: 'blur'：当失去焦点时（光标不显示的时候），触发此提示{ validator: validateName, message: '请输入用户名', trigger: 'blur'}],password: [{ validator: validatePassword, message: '请输入密码', trigger: 'blur'}]}}},

• rule: 源描述符中与要验证的字段名相对应的验证规则。它始终被分配一个字段属性，该属性具有要验证的字段的名称
• callback: 验证完成后调用的回调函数。它需要传递一个错误实例数组来指示验证失败。如果检查是同步的，则可以直接返回一个错误、错误或错误数组。
• trigger: ‘blur’：当失去焦点时（光标不显示的时候），触发此提示

初始登录界面

验证用户名和密码