＜el-form 表单验证

<!-- 表单 -->

<el-form ref="rulesForm" :rules="rules" :model="rules" label-width="200px">

  <el-form-item prop="username">

                <el-input type="text" v-model="loginForm.username" autocomplete="off" placeholder="用户名" prefix-icon="login-icon login-icon-user"></el-input>

            </el-form-item>

            <el-form-item prop="password">

                <el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="密码" prefix-icon="login-icon login-icon-psw"></el-input>

            </el-form-item>

            <el-form-item>

                <el-button type="primary" @click="loginFun('ruleForm')">登 录</el-button>

            </el-form-item>

 </el-form>

• <el-form>：代表这是一个表单
• <el-form> -> ref：表单被引用时的名称，标识
• <el-form> -> rules：表单验证规则
• <el-form> -> model：表单数据对象
• <el-form> -> label-width：表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值
• <el-form> -> <el-form-item>：表单中的每一项子元素
• <el-form-item> -> label：标签文本
• <el-form-item> -> prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
• <el-input>：输入框
• <el-input> -> v-model：绑定的表单数据对象属性
• <el-input> -> style：行内样式
• <el-input> -> maxlength：最大字符长度限制