詳解elementUI表單的驗證規則---vue(基本用法)

1.UI效果圖

 2.html代碼詳解

<template>
    <div id="app">
        <el-form inline :model="formdata" :rules="rules" ref="elfrom">
            <el-form-item label="審批人" prop="username">
                <el-input v-model="formdata.username" placeholder="審批人"></el-input>
            </el-form-item>
            <el-form-item label="活動區域">
                <el-select v-model="formdata.region" placeholder="活動區域">
                    <el-option label="上海" value="上海">上海</el-option>
                    <el-option label="北京" value="北京">北京</el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button autofocus size="medium" type="primary" @click="onSubmit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

2.1.el-form標簽

這個標簽只有一個

2.2.el-form標簽上的屬性

• 2.2.1 inline：控制樣式在一行與否

• 2.2.2 :model：動態輸入的對象
  

• 2.2.3 :rules：驗證規則

• 2.2.4 ref：獲取dom結構，用在提交時this.$refs.elform.validate( ()=>{} ),ref的內容可以任意名稱

2.3.el-form-item標簽上的屬性

每一個表單部分由一個el-form-item標簽包裹着

• 2.3.1.label：對應的標題名稱
• 2.3.2.prop：驗證規則rules里面的屬性，必須和fromdata里面的屬性對應，讓代碼知道是為哪個部分驗證

3.js代碼

export default {
    name: 'app',
    data (){
        const userValidator = (rule, value, callback) => {
            if(value.length > 3){
                callback();
            }else{
                callback( new Error('用戶長度必須大於3') );
            }
        }
        return {
            formdata: {
                username: '',
                region: ''
            },
            rules: {
                username: [
                    { required: true, trigger: 'change', message: '用戶名必須錄入' },
                    { validator: userValidator, trigger: 'change'}
                ]
            }
        }
    },
    methods: {
        onSubmit(){
            this.$refs.elfrom.validate( (isValidate, errordata)=> {
                console.log(isValidate);
                console.log(errordata);
            })
        }
    }

}

3.1.驗證規則的順序

3.1.1.第一步

驗證username的第一條對象里面的規則，即，{ required: true,trigger:'change',message:'用戶名必須錄入'}

 

即，message:'用戶名必須錄入'

3.1.2.第二步

驗證username的第二條對象里面的規則，即，{validator：userValidator,trigger:'change'}

 

 

 即，new Error('用戶長度必須大於3')

3.1.3.第三步

點擊提交之后的驗證this.$refs.elform.validate()

3.2.注意userValidator的位置