iview组件安装、加载，以及关于iview的校验规则和相关校验函数

安装iview

1、安装依赖

（1） 从node.js官网下载并安装node，安装过程很简单，一直点下一步就ok了，安装完之后，我们通过打开命令行工具（win+R）,输入node -v 命令，查看node的版本，若出现相应的版本号，则说明你安装成功了。

npm包管理器，是集成在node中的，所以安装了node也就有了npm,直接输入 npm -v 命令，显示npm的版本信息。

（2） 安装cnpm， 在命令行中输入 ：

 npm install -g cnpm --registry=http://registry.npm.taobao.org

（3）安装vue-cli 脚手架构建工具，在命令行中运行命令：

cnpm install -g vue-cli 

环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。

（4）安装依赖：在创建的项目下，进入命令窗口，可以直接在项目目录下进入：

在命令窗口中运行如下命令：

 $ npm install iview --save

会安装最新版本的依赖，安装完成后package.json会出现如下图配置：

（5）然后在main.js中引入“iview”和相应的css文件“iview/dist/styles/iview.css”，并use，即全局引用，如下图：

此时即可以在所有组件中使用iview中的组件了。

组件加载

（1）按需加载
简单使用很简单，按需加载也并不复杂

按需加载要在简单使用的前提下安装一个依赖： babel-plugin-import

首先安装此依赖

npm install babel-plugin-import --save-dev

安装完成后可在package.json——devDependencies中看到如下属性

然后在.babelrc文件中plugins属性中添加如下配置：

 ["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]

如图：

（2）全局按需加载

修改main.js中的引入

css文件仍然要有，引入的完整iview替换为特定组件，vue.use()替换为vue.component()

此后可在全局使用引入的组件

这样做的好处是减少引入体积，增快加载效率

（2.1）局部按需加载

在安装和配置babel-plugin-import依赖之后main.js不需要做任何修改

在相应需要用到iview组件的位置作如下引入（本质上跟全局引入是一样的），只是将引入的位置改变了。

表单校验

Form 组件基于 sync-validator 实现的数据验证，给 Form 设置属性 rules，同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可。

（1）String类型的表单校验：

formValidate: {
    money: [{ required: true, message: "金额不能为空", trigger: "blur" }]
},

（2）数值校验：

当我们使用 Form 表单校验时，如果字段使用的是 String 类型，显然通过 required:true 即可满足，但如果是数值时可就不能这么校验了，怎么办呢？

自定义校验

formValidate: {
    money: [{  validator: validateMoney, trigger: 'blur' ,required:true }]
},

这里用到了 validator 属性，在这我们引入了自己定义的校验规则 validateMoney，该方法可以放在公共部分，具体如下：

自定义校验规则：

const validateMoney = (rule, value, callback) => {
    let reg =/^[1-9]{1}\d{2,}$/; // 检验规则为正则，可自行百度。
    if(reg.test(value)){
        callback();
    }else {
        return callback(new Error("请输入100及以上的整数"));
    }
};

    1.rule 字段名称相对应的验证规则。始终为它分配一个 field 属性，其中包含要验证的字段的名称。
    2.value 表示当前输入的值。
    3.callback 验证完成时调用的回调函数，回传 Error 表示失败。

常用校验函数
（1）校验手机号码

validateOrderNum = (rule, value, callback) => {
  if (rule.required && !value && value !== 0) {
    callback(new Error('排序号不能为空'))
  }
  if (!value && value !== 0) {
    callback()
  } else {
    let regex = /^[0-9]*$/
    if (!regex.test(value)) {
      callback(new Error('请输入数字'))
    }
    let val = parseInt(value)
    if (val % 1 !== 0) {
      callback(new Error('请输入整数'))
    } else {
      callback()
    }
  }
}

（2）身份证号校验

validateIdNum = (rule, value, callback) => {
  // 15位和18位身份证号码的基本校验
  let check = /^\d{15}|(\d{17}(\d|x|X))$/.test(value);
  if (!check) {
    callback(new Error('身份证号验证不合法'));
    return false;
  }
 
  // 判断长度为15位或18位
  if (value.length === 15) {
    // 15位身份证号码的基本校验
    check = /^[1-9]\d{7}((0[1-9])|(1[0-2]))((0[1-9])|([1-2][0-9])|(3[0-1]))\d{3}$/.test(value);
    if (!check) {
      callback(new Error('身份证号验证不合法'));
      return false;
    }
  } else if (value.length === 18) {
    // 身份证正则表达式(18位)
    let cardid = value;
    let isIdCard2 = /^[1-9]\d{5}(19\d{2}|[2-9]\d{3})((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])(\d{4}|\d{3}X)$/i;
    let stard = '10X98765432'; // 最后一位身份证的号码
    let first = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; // 1-17系数
    let sum = 0;
    // console.log(cardid)
    if (!isIdCard2.test(cardid)) {
      callback(new Error('身份证号验证不合法'));
      return false;
    }
    let year = cardid.substr(6, 4);
    let month = cardid.substr(10, 2);
    let day = cardid.substr(12, 2);
    let birthday = cardid.substr(6, 8);
    if (birthday !== dateToString(new Date(year + '/' + month + '/' + day))) { // 校验日期是否合法
      callback(new Error('身份证号验证不合法'));
      return false;
    }
    for (let i = 0; i < cardid.length - 1; i++) {
      sum += cardid[i] * first[i];
      // console.log(sum)
    }
    let result = sum % 11;
    let last = stard[result]; // 计算出来的最后一位身份证号码
    // 日期转字符串 返回日期格式20080808
    if (cardid[cardid.length - 1].toUpperCase() === last) {
      callback();
      return true;
    } else {
      callback(new Error('身份证号验证不合法'));
      return false;
    }
  } else {
    callback(new Error('身份证号验证不合法'));
    return false;
  }

如有错误，欢迎指正！！！