首先：template

先建立一個form表單，：model繫結表單索要提交的物件，：rules2是此表單繫結的校驗規則，ref用來繫結這個dom元素，之後在$refs呼叫。

<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" >
    <h3 class="title">後臺管理登入</h3>
    <el-form-item prop="account">
        <el-input
 
 type="text" v-model="ruleForm2.account" :maxlength='20' auto-complete="off" placeholder="請輸入使用者名稱" @keyup.enter.native='handleSubmit2'></el-input>
    </el-form-item>
    <el-form-item prop="checkPass">
        <el-input type="password" v-model="ruleForm2.checkPass" :maxlength=
 
'16' auto-complete="off" placeholder="請輸入密碼"  @keyup.enter.native='handleSubmit2'></el-input>
    </el-form-item>
    <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登入</el-button
 
>
    </el-form-item>
    <p class="forgetP" @click="goToforget">忘記密碼？</p>
</el-form>

• 在 Form 元件中，每一個表單域由一個 Form-Item 元件構成，表單域中可以放置各種型別的表單控制元件，包括
  Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker等。
• 通過設定 label-position 屬性可以改變表單域標籤的位置，可選值為 top、left，當設為 top
  時標籤會置於表單域的頂部。
• Form 元件提供了表單驗證的功能，只需要通過 rules 屬性傳入約定的驗證規則，並 Form-Item 的 prop
  屬性設定為需校驗的欄位名即可。

然後是：data

data() {
        //使用者名稱自定義校驗規則
        var validateAccount = (rule, value, callback) => {
            if (!value) {
                callback(new Error('請輸入使用者名稱'));
            } else {
                var targ = /^[A-Za-z0-9]+$/;
                if( !targ.test(value)){
                    callback(new Error('使用者名稱只支援英文、數字'));
                }
                callback();
            }
        };
        return {
            logining: false,//載入動畫
            ruleForm2: {
                account: '',//使用者名稱
                checkPass: ''//密碼
            },
            rules2: {
                account: [
                    { validator: validateAccount, trigger: 'blur' }
                ],
                checkPass: [
                    { required: true, message: '請輸入密碼', trigger: 'blur' },
                    { min: 8, max: 16, required: true, message: '密碼至少為8位', trigger: 'blur' },
                ]
            },
        };
    },

rules2是我們表單校驗的規則，是一個物件，因為有使用者名稱和密碼，所有我們要設定兩個校驗規則，分別為兩個陣列。
先看使用者名稱的校驗規則：
{ validator: validateAccount, trigger: ‘blur’ }
async-validator 是一個非同步驗證的庫，需要傳入要驗證的資料和驗證規則
官方連結 https://github.com/yiminghe/async-validator

最後：methods

methods: {
        //點選登入
        handleSubmit2(ev) {
            var _this = this;
            this.$refs.ruleForm2.validate((valid) => {
                if (valid) {
                    this.logining = true;
                    //使用者資訊
                    var loginParams = {
                        userName: this.ruleForm2.account,
                        userPassword: this.ruleForm2.checkPass,
                        loginInfo:""
                    };
                    requestLogin(loginParams).then(data => {
                       console.log(data)
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

    }