Vue.js note13（Mixins混入&ElementUI框架&表单邮箱、密码格式验证&过滤特殊符号&封装工具库&取消eslint验证）

一、Mixins

官方文档：https://cn.vuejs.org/v2/guide/mixins.html

当有相同的方法、变量多次、多地方使用时，可以用混入。 比如当页面风格不同，但执行的方法和需要的数据类似，我们是选择每个都写呢？还是提取出公共部分？在这个时候可以使用混入来完成。

0、Mixins是什么
Mixins是一种分发Vue组件中可复用功能的非常灵活的一种方式。

流程：封装并暴露—>哪用哪引—>调用—>使用

1、局部混入（常用）：谁用谁引

2、全局混入（不建议）：在main.js里面引入，谁都可以用。
虽然简单，但容易造成污染。

二、element ui

在vue中占有的比重很大。
官网：https://element.eleme.cn/2.0/#/zh-CN/component/carousel

先下载：npm i element-ui -S

小栗子：表单组件验证功能（比如表单邮箱验证）

这是直接从官网拷贝过来的样子，能够进行输入内容格式的验证。不过我们还可以有更多扩展的验证，下面要做的就是进行功能的扩展。

我现在主要展示两件事情。第一件，验证邮箱；第二件，验证密码格式，然后过滤特殊字符。（其实就改改人家写好的内容）

首先修改页面展示，

<template>
  <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
    <el-form-item label="邮箱" prop="pass">
      <el-input type="text" v-model="ruleForm2.pass" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="过滤特殊符号" prop="checkPass">
      <el-input type="text" v-model="ruleForm2.checkPass" auto-complete="off"></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>
</template>

然后更改脚本，这个时候，你会发现，总是会有错误报出，莫急，这是因为eslint代码验证，取消掉就好了，取消的方法，请看下个章节。

不报错误后，我们继续。基本上对拷贝过来的脚本不大改，就改改小细节。

先看第一件，验证邮箱

var validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('邮箱不能为空'));
  } else {
    var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
    if (!reg.test(value)) {
      callback(new Error('邮箱不正确'));
    }else{
      callback();
    }
  }
};

第二件，验证密码格式，然后过滤特殊字符

var validatePass2 = (rule, value, callback) => {
	if (value === '') {
	  callback(new Error('请输入密码'));
	} else {
	  let reg = /^(?!\D+$)(?![^a-zA-Z]+$)\S{6,20}$/;
	  if(!reg.test(this.stripscript(value))){
	    callback(new Error('密码必须是字母加数字 6-20位！！！'));
	  }else{
	    callback();
	  }
	}
};
methods: {
	//过滤特殊字符的方法
	stripscript(s) {
	  var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*%-+（）&;—|{}【】‘；：”“'。，、？]")
	  var rs = "";
	  for (var i = 0; i < s.length; i++) {
	    rs = rs + s.substr(i, 1).replace(pattern, '');//一个一个的比较，不合规范就用''替换掉
	  }
	  console.log(rs)
	  return rs;
	},
}

尝试修改验证规则：

• 验证邮箱：var reg = /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+.([a-zA-Z]{2,4})$/;
• 字母+数字：let reg = /^(?!\D+$)(?!{[}^a-zA-Z]+$)\S{6,20}$/
• 字母 或 数字：left reg = /¹{6}$/
• 过滤特殊字符：

  function stripscript(s) {
  	var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*%（）&;—|{}【】‘；：”“'。，、？]")
  	var rs = "";
  	for (var i = 0; i < s.length; i++) {
  	        rs = rs + s.substr(i, 1).replace(pattern, '');
  	    }
  	return rs;
  }
  

三、取消eslint代码验证

自定义验证

可能会出现

其实是 eslint代码验证 问题。取消验证 lintOnSave: false ； 在vue项目中新建vue.config.js，添加配置：lintOnSave: false，然后重启。

刚刚展示过过滤器特殊字符的这个小功能，但是思考一个问题：如果好几个地方都要使用刚才的过滤字符怎么办？写很多次吗？这时候就可以把这个小功能封装成在工具库里。看下个章节。

四、封装工具库

src/util 新建（工具文件夹）

在src文件夹下创建一个util（工具文件夹），把一些工具类的js文件进行统一管理。比如我们把刚刚用的过滤特殊字符串的方法放在里面，然后暴露出来。

在需要的位置引用使用：

然后把 this.stripscript(value) 改成 stripscript(value)。

其他

Notification 通知 H5新特性

---

1. a-z0-9 ↩︎