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]; // 计算出来的最后一位身份证号码// 日期转字符串 返回日期格式20080808if (cardid[cardid.length - 1].toUpperCase() === last) {callback();return true;} else {callback(new Error('身份证号验证不合法'));return false;}} else {callback(new Error('身份证号验证不合法'));return false;}

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

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

vue 组件延时加载_为什么以及如何延迟加载角组件
vue 组件延时加载 "Before software can be reusable it first has to be usable." "在软件可重用之前,首先必 ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
为此计算机所有用户安装加载项,此网站需要运行以下加载项……如果您信任该网站和该加载项并允许运行该加载项...
什么是浏览器加载项加载项是指为浏览器添加扩展功能的特殊软件.提到加载项一般涉及插件.扩展组件.工具栏等,通常是由非微软的第三方厂商编写.有些加载项可以在浏览器中直观地看见.有些则以静默的方式运行于后 ...
vue延迟渲染组件_性能优化之组件懒加载: Vue Lazy Component 介绍
这篇文章分享了从遇到前端业务性能问题,到分析.解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案(Vue Lazy Component )的过程. 初始加载资源过多问题起源于我们的一个页面,下 ...
laravel组件单独加载（2）：模型 Eloquent ORM
模型组件的加入目前的项目代码是基于上一个文章的,不知道的可以看上一个文章laravel组件单独加载(1):路由修改composer.json文件加入模型组件 {"require" ...
excel2007无法加载mysql_Excel2007中进行无法安装加载项的解决方法
最近在学数学模型,用规划求解来计算.以前用Excel XP,知道在工具中加载相关的宏,然后很顺利地就能求解.但是用Excel 2007就找不到北了,今天,学习啦小编就教大家在Excel2007中进行无 ...
关于vue的组件重新加载
因为项目样式的问题,所以没有选择去使用路由跳转,而是在一个页面当中import. 这样随之而来的问题就是进来默认加载造成的页面非常卡... 那么想了一个办法解决这个问题利用组件重新加载详细 > ...
vue实现当前组件重新加载
遇到问题的场景: 数据发生了变化,组件并没有响应到问题所在需要把当前组件完全还原成初始化状态,不要页面全部刷新 4种解决方法: 重新加载整个页面(不推荐) v-if可以实现 true (加载)和f ...
vue 父组件重新加载子组件
vue 父组件重新加载子组件通过给子组件添加key或者v-if 重新加载子组件: html: <button @click="update">更新</butt ...

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

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

最新文章

热门文章