vue+elementui 提高開發效率，以下為form表單驗證例子。包含自定義驗證等。

1. 以中國大陸手機號驗證為例

// 這是組價的程式碼
<el-form-item prop="mobile">
    <el-input type="text" v-model="ruleForm.mobile" auto-complete="off" placeholder="請輸入手機號"></el-input>
</el-form-item>

// 這是rules的程式碼
mobile: [
    { validator: validateMobile, trigger: 'blur'
 
 },
    { required: true, message: '請輸入手機號', trigger: 'blur' },
    { pattern: /^1[34578]\d{9}$/, message: '目前只支援中國大陸的手機號碼' }
],

在element-ui的原始碼中搜索blur，你會很容易看到除了blur 還有focus、input，多個使用“,”分隔

2. 表單區域性提交後端驗證

在一些輸入專案較多的表單提交中，比如說註冊時填寫的使用者名稱，通常我們會對使用者名稱是否重複進行驗證，這是就需要呼叫服務來驗證，這種略顯複雜的驗證，就需要自定義驗證規則來實現。看下面的程式碼：

function validateMobile(rule, value, callback) {

                       var MobileRegex = /^1[0-9]{10}$/;
                         if (!MobileRegex.test(value)) {
                             callback(new Error('手機號碼格式不正確！'))
                         } else {
                             callback();
                         }
                     }

注意：自定義規則中每個執行流程中都必須附帶callback()，這樣才能明確通過驗證的情況下去掉輸入框上的loading。要顯示的錯誤提示則可以new Error（“xxxx”）即可。

3. 綜合來看

通常可以把所有規則都寫在自定義的規則中，即可實現較為複雜的驗證，實際上我們可以再validatePass裡面呼叫根例項下所有data methods...，一個很簡單的例子是實現兩次輸入的密碼是否相同的驗證，看下面的程式碼：

     <div id="app">
             <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                  <el-form-item label="活動名稱" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                  </el-form-item>
                 <el-form-item label="手機號碼"  prop="mobile">
                     <el-input v-model="ruleForm.mobile"></el-input>
                 </el-form-item>
                  <el-form-item label="活動區域" prop="region">
                    <el-select v-model="ruleForm.region" placeholder="請選擇活動區域">
                      <el-option label="區域一" value="shanghai"></el-option>
                      <el-option label="區域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="活動時間" required>
                    <el-col :span="11">
                      <el-form-item prop="date1">
                        <el-date-picker type="date" placeholder="選擇日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                      <el-form-item prop="date2">
                        <el-time-picker type="fixed-time" placeholder="選擇時間" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                      </el-form-item>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="即時配送" prop="delivery">
                    <el-switch v-model="ruleForm.delivery"></el-switch>
                  </el-form-item>
                  <el-form-item label="活動性質" prop="type">
                   <el-checkbox-group v-model="ruleForm.type">
                      <el-checkbox label="1"  name="type">美食/餐廳線上活動</el-checkbox>
                      <el-checkbox label="2" name="type">地推活動</el-checkbox>
                      <el-checkbox label="3" name="type">線下主題活動</el-checkbox>
                      <el-checkbox label="4" name="type">單純品牌曝光</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="特殊資源" prop="resource">
                    <el-radio-group v-model="ruleForm.resource">
                      <el-radio label="線上品牌商贊助"></el-radio>
                      <el-radio label="線下場地免費"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="活動形式" prop="desc">
                    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即建立</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                  </el-form-item>
          </el-form>


        </div>
        <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>


<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<script  type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            ruleForm: {
                name: '',
                mobile: "",
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: [
                  { required: true, message: '請輸入活動名稱', trigger: 'blur' },
                  { min: 3, max: 5, message: '長度在 3 到 5 個字元', trigger: 'blur' }
                ],
                mobile: [
                  { required: true, message: '請輸入手機號碼', trigger: 'blur' },
                 {
                     validator: function (rule, value, callback) {
                         var MobileRegex = /^1[0-9]{10}$/;
                         if (!MobileRegex.test(value)) {
                             callback(new Error('手機號碼格式不正確！'))
                         } else {
                             callback();
                         }
                     }, trigger: 'blur'
                 }
                ],
                region: [
        { required: true, message: '請選擇活動區域', trigger: 'change' }
                ],
                date1: [
            { type: 'date', required: true, message: '請選擇日期', trigger: 'change' }
                ],
                date2: [
                  { type: 'date', required: true, message: '請選擇時間', trigger: 'change' }
                ],
                type: [
                  { type: 'array', required: true, message: '請至少選擇一個活動性質', trigger: 'change' }
                ],
                resource: [
                  { required: true, message: '請選擇活動資源', trigger: 'change' }
                ],
                desc: [
                  { required: true, message: '請填寫活動形式', trigger: 'blur' }
                ]
            }
        }, methods: {
            submitForm: function (formName) {
                var Self = this;
                this.$refs[formName].validate(function (valid) {
                    if (valid) {
                        alert(JSON.stringify(Self.ruleForm));
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm: function (formName) {
                this.$refs[formName].resetFields();
            }


        }
    });
</script>

就這麼簡單就可以實現非vuejs情況下是非囉嗦的驗證。而且樣式也不會很醜，當然了任然可以選擇自定義樣式。這個以後再記錄。

效果圖如下：