//需要單獨驗證的字段名phone
 this.$refs.loginForm.validateField('phone', (val) => {
      if (!val) {
        return true;
      } else {
        return false;
      }
    })
  },

<div class="form-section">
        <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" placeholder="請輸入用户名"></el-input>
            </el-form-item>
            
            <el-form-item label="郵箱" prop="email">
                <el-input v-model="form.email" placeholder="請輸入郵箱"></el-input>
            </el-form-item>
            
            <el-form-item label="手機號" prop="phone">
                <el-input v-model="form.phone" placeholder="請輸入手機號"></el-input>
            </el-form-item>
        </el-form>

        <div class="button-group">
            <el-button type="primary" @click="validateUsername">驗證用户名</el-button>
            <el-button type="success" @click="validateEmail">驗證郵箱</el-button>
            <el-button type="warning" @click="validatePhone">驗證手機號</el-button>
            <el-button type="info" @click="validateMultiple">驗證用户名和郵箱</el-button>
            <el-button type="danger" @click="resetForm">重置表單</el-button>
        </div>
    </div>

    <div class="result-area" v-if="validationResult">
        <h4>驗證結果：</h4>
        <p :style="{color: validationResult.success ? '#67c23a' : '#f56c6c'}">
        {{ validationResult.message }}
        </p>
    </div>

    <div class="code-block">
        <h4>validateField 方法説明：</h4>
        <p>this.$refs.formRef.validateField('字段名', (errorMsg) => {</p>
        <p style="margin-left: 20px;">// errorMsg 為驗證錯誤信息，如果為空則表示驗證通過</p>
        <p>});</p>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    username: '',
                    email: '',
                    phone: ''
                },
                rules: {
                    username: [
                        { required: true, message: '請輸入用户名', trigger: 'blur' },
                        { min: 3, max: 10, message: '用户名長度在 3 到 10 個字符', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '請輸入郵箱地址', trigger: 'blur' },
                        { type: 'email', message: '請輸入正確的郵箱地址', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '請輸入手機號', trigger: 'blur' },
                        { pattern: /-9]\d{9}$/, message: '請輸入正確的手機號碼', trigger: 'blur' }
                    ]
                },
                validationResult: null
            }
        },
        methods: {
            validateUsername() {
                this.$refs.formRef.validateField('username', (errorMsg) => {
                    if (errorMsg) {
                        this.validationResult = {
                            success: false,
                            message: '用户名驗證失敗：' + errorMsg
                        };
                    } else {
                        this.validationResult = {
                            success: true,
                            message: '用户名驗證通過'
                        };
                    }
                });
            },
            validateEmail() {
                this.$refs.formRef.validateField('email', (errorMsg) => {
                    if (errorMsg) {
                        this.validationResult = {
                            success: false,
                            message: '郵箱驗證失敗：' + errorMsg
                        };
                    } else {
                        this.validationResult = {
                            success: true,
                            message: '郵箱驗證通過'
                        };
                    }
                });
            },
            validatePhone() {
                this.$refs.formRef.validateField('phone', (errorMsg) => {
                    if (errorMsg) {
                        this.validationResult = {
                            success: false,
                            message: '手機號驗證失敗：' + errorMsg
                        };
                    } else {
                        this.validationResult = {
                            success: true,
                            message: '手機號驗證通過'
                        };
                    }
                });
            },
            validateMultiple() {
                let hasError = false;
                let errorMessages = [];
                
                this.$refs.formRef.validateField(['username', 'email'], (errorMsg) => {
                    if (errorMsg) {
                        hasError = true;
                        errorMessages.push(errorMsg);
                    }
                });
                
                if (hasError) {
                    this.validationResult = {
                        success: false,
                        message: '多項驗證失敗：' + errorMessages.join('；')
                    };
                } else {
                    this.validationResult = {
                        success: true,
                        message: '用户名和郵箱驗證通過'
                    };
                }
            },
            resetForm() {
                this.$refs.formRef.resetFields();
                this.validationResult = null;
            }
        }
    });
</script>