＜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：最大字符長度限制