Vue iview 表單封裝驗證

如下內容轉自iview社區，僅供本身查看使用

Form表單部分
<div>
  <Form ref="FormOne" :model="FormOne" :rules="ruleFormOne" :label-width="80">
    <FormItem label="姓名" prop="name">
      <i-input type="text" v-model="FormOne.name"></i-input>
    </FormItem>
    <FormItem label="身份證" prop="idCard">
      <i-input type="text" v-model="FormOne.idCard"></i-input>
    </FormItem>
    <FormItem>
      <Button type="primary" @click="handleSubmit('FormOne')">提 交</Button>
      <Button @click="handleReset('FormOne')" style="margin-left: 8px">重 置</Button>
    </FormItem>
  </Form></div>
新建 Format.js 文件，編寫校驗規則
var regId = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/var email = /^(\w+\.?)*\w+@(?:\w+\.)\w+$/var tel = /^1[345789]\d{9}$/var fax = /^(\d{3,4}-)?\d{7,8}$/var FormValidate = (function () {
  // eslint-disable-next-line
  function FormValidate() {}
  // From表單驗證規則  可用於公用的校驗部分
  FormValidate.Form = function () {
    return {
      // 姓名的驗證規則
      Email: function (rule, value, callback) {
        if (!value) {
          return callback(new Error('郵箱不能爲空'))
        }
        if (!email.test(value)) {
          callback(new Error('請輸入正確的郵箱!'))
        } else {
          callback()
        }
      },
      // 身份證的驗證規則
      ID: function (rule, value, callback) {
        if (!value) {
          return callback(new Error('身份證不能爲空'))
        }
        if (!regId.test(value)) {
          callback(new Error('請輸入正確的二代身份證號碼'))
        } else {
          callback()
        }
      },
      // 電話號碼的驗證
      Tel: (rule, value, callback) => {
        if (!value) {
          return callback(new Error('電話不能爲空'))
        }
        if (!tel.test(value)) {
          callback(new Error('請正確填寫電話號碼'))
        } else {
          callback()
        }
      }
    }
  }

  // FromOne表單驗證規則  用於FromOne個性化的校驗
  FormValidate.FormOne = function () {
    return {
      // 姓名的驗證規則
      Name: function (rule, value, callback) {
        if (!value) {
          return callback(new Error('姓名不能爲空'))
        }
        if (!isNaN(value)) {
          callback(new Error('請輸入正確姓名!'))
        } else if (value.length < 2 || value.length > 6) {
          callback(new Error('請輸入2到6個字符!'))
        } else {
          callback()
        }
      }
    }
  }

  // FromTwo表單驗證規則  用於FromTwo表單個性化的校驗
  FormValidate.FormTwo = function () {
    return {
      // 傳真的校驗規則
      Fax: (rule, value, callback) => {
        if (!value) {
          return callback(new Error('傳真不能爲空'))
        }
        if (!fax.test(value)) {
          callback(new Error('請正確填寫傳真'))
        } else {
          callback()
        }
      }
    }
  }
  return FormValidate
}())
exports.FormValidate = FormValidate
在組件的js中引入 Format.js文件
import Format from "./Format.js"
組件內js部分
export default {
  data() {
    return {
      FormOne: {
        name: "",
        idCard: "",
        age: ""
      },
      ruleFormOne: {
        name: [
          {
            validator: Format.FormValidate.FormOne().Name,
            trigger: "blur"
          }
        ],
        idCard: [
          {
            validator: Format.FormValidate.Form().Tel,
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    console.log(Format.FormValidate.FormOne().name);
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("Success!");
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    }
  }
};

 

　　

Form表單部分

<div>

  <Form ref="FormOne" :model="FormOne" :rules="ruleFormOne" :label-width="80">

    <FormItem label="姓名" prop="name">

      <i-input type="text" v-model="FormOne.name"></i-input>

    </FormItem>

    <FormItem label="身份證" prop="idCard">

      <i-input type="text" v-model="FormOne.idCard"></i-input>

    </FormItem>

    <FormItem>

      <Button type="primary" @click="handleSubmit('FormOne')">提 交</Button>

      <Button @click="handleReset('FormOne')" style="margin-left: 8px">重 置</Button>

    </FormItem>

  </Form></div>

新建 Format.js 文件，編寫校驗規則

var regId = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/var email = /^(\w+\.?)*\w+@(?:\w+\.)\w+$/var tel = /^1[345789]\d{9}$/var fax = /^(\d{3,4}-)?\d{7,8}$/var FormValidate = (function () {

  // eslint-disable-next-line

  function FormValidate() {}

  // From表單驗證規則  可用於公用的校驗部分

  FormValidate.Form = function () {

    return {

      // 姓名的驗證規則

      Email: function (rule, value, callback) {

        if (!value) {

          return callback(new Error('郵箱不能爲空'))

        }

        if (!email.test(value)) {

          callback(new Error('請輸入正確的郵箱!'))

        } else {

          callback()

        }

      },

      // 身份證的驗證規則

      ID: function (rule, value, callback) {

        if (!value) {

          return callback(new Error('身份證不能爲空'))

        }

        if (!regId.test(value)) {

          callback(new Error('請輸入正確的二代身份證號碼'))

        } else {

          callback()

        }

      },

      // 電話號碼的驗證

      Tel: (rule, value, callback) => {

        if (!value) {

          return callback(new Error('電話不能爲空'))

        }

        if (!tel.test(value)) {

          callback(new Error('請正確填寫電話號碼'))

        } else {

          callback()

        }

      }

    }

  }

 

  // FromOne表單驗證規則  用於FromOne個性化的校驗

  FormValidate.FormOne = function () {

    return {

      // 姓名的驗證規則

      Name: function (rule, value, callback) {

        if (!value) {

          return callback(new Error('姓名不能爲空'))

        }

        if (!isNaN(value)) {

          callback(new Error('請輸入正確姓名!'))

        } else if (value.length < 2 || value.length > 6) {

          callback(new Error('請輸入2到6個字符!'))

        } else {

          callback()

        }

      }

    }

  }

 

  // FromTwo表單驗證規則  用於FromTwo表單個性化的校驗

  FormValidate.FormTwo = function () {

    return {

      // 傳真的校驗規則

      Fax: (rule, value, callback) => {

        if (!value) {

          return callback(new Error('傳真不能爲空'))

        }

        if (!fax.test(value)) {

          callback(new Error('請正確填寫傳真'))

        } else {

          callback()

        }

      }

    }

  }

  return FormValidate

}())

exports.FormValidate = FormValidate

在組件的js中引入 Format.js文件

import Format from "./Format.js"

組件內js部分

export default {

  data() {

    return {

      FormOne: {

        name: "",

        idCard: "",

        age: ""

      },

      ruleFormOne: {

        name: [

          {

            validator: Format.FormValidate.FormOne().Name,

            trigger: "blur"

          }

        ],

        idCard: [

          {

            validator: Format.FormValidate.Form().Tel,

            trigger: "blur"

          }

        ]

      }

    };

  },

  mounted() {

    console.log(Format.FormValidate.FormOne().name);

  },

  methods: {

    handleSubmit(name) {

      this.$refs[name].validate(valid => {

        if (valid) {

          this.$Message.success("Success!");

        } else {

          this.$Message.error("Fail!");

        }

      });

    },

    handleReset(name) {

      this.$refs[name].resetFields();

    }

  }

};

 .

方法是共通的 在其餘Vue組件庫中一樣使用