Vue Element表單綁定（三）表單驗證2

1、表單驗證，常見類型

詳細說明：https://github.com/yiminghe/async-validator

Type

Indicates the type of validator to use. Recognised type values are:

• string: Must be of type string. This is the default type.
• number: Must be of type number.
• boolean: Must be of type boolean.
• method: Must be of type function.
• regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.
• integer: Must be of type number and an integer.
• float: Must be of type number and a floating point number.
• array: Must be an array as determined by Array.isArray.
• object: Must be of type object and not Array.isArray.
• enum: Value must exist in the enum.
• date: Value must be valid as determined by Date
• url: Must be of type url.
• hex: Must be of type hex.
• email: Must be of type email.

更多代碼示例：https://my.oschina.net/tianma3798/blog/3010171

2、自定義驗證規則、異步驗證

驗證使用:rules 定義js驗證處理，或者單獨指定某一項的：rules配置處理。

<template>
  <div>
    <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px">
      <el-form-item label="用戶名" prop="username">
        <el-input type="text" v-model="ruleForm2.username" placeholder="請輸入用戶名"></el-input>
      </el-form-item>
      <el-form-item label="密碼" prop="pass">
        <el-input type="password" v-model="ruleForm2.pass"></el-input>
      </el-form-item>
      <el-form-item label="確認密碼" prop="checkPass">
        <el-input type="password" v-model="ruleForm2.checkPass"></el-input>
      </el-form-item>
      <el-form-item
        label="年齡"
        prop="age"
        :rules="[
        {required:true,message:'年齡不能空'},
        {type:'number',message:'請輸入數字',trigger:'blur'}
        ]"
      >
        <el-input type="age" v-model.number="ruleForm2.age"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
        <el-button @click="resetForm('ruleForm2')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

js示例代碼：

export default {
  data() {
    //定義驗證規則
    var checkUserName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用戶不能空"));
      }
      //延遲驗證
      //   setTimeout(() => {
      //     if (!Number.isInteger(value)) {
      //       callback(new Error("不能純數字"));
      //     } else {
      //       callback();
      //     }
      //   }, 1000);
      //異步驗證
      $.get(
        "http://api.gongjuji.net/download/addrecord?type=1&content=uploader6.0%E6%BA%90%E7%A0%81%E4%B8%8B%E8%BD%BD",
        function(data) {
          console.info(data);
          if (!data) {
            callback("用戶名不正確");
          } else {
            callback();
          }
        }
      );
    };
    //驗證碼確認驗證碼處理
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("請輸入密碼"));
      } else {
        if (this.ruleForm2.checkPass !== "") {
          this.$refs.ruleForm2.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("請再次輸入密碼"));
      } else if (value !== this.ruleForm2.pass) {
        callback(new Error("兩次輸入密碼不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm2: {},
      rules2: {
        username: [
          { required: true, validator: checkUserName, trigger: "blur" }
        ],
        pass: [{ required: true, validator: validatePass,trigger:'blur' }],
        checkPass: [{ required: true, validator: validatePass2 }]
      }
    };
  },
  methods: {
    //提交驗證
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert(JSON.stringify(this.ruleForm2));
        } else {
          return false;
        }
      });
    },
    //重置表單
    resetForm(formName) {
      this.$refs[formName].resetFileds();
    }
  }
};

 

更多：

Vue Element表單綁定（二）表單驗證1

Vue Element表單綁定（一）

Vue 動態加載組件方式整理