ElementUI使用问题记录：设置路由+iconfont图标+自定义表单验证

一、关于导航怎么设置路由

1、在el-menu这个标签的属性中添加 router ,官方文档的解释是：启用vue-router 这种模式

2、在el-menu-item标签中的index属性直接书写路由，就可以实现正常vue-router了

3、在el-menu-item标签中书写路由属性：:route='{path:"/product"}'

<el-menu
      class="el-menu-vertical"
      background-color="#364150"
      router
      text-color="#e6eefd"
      active-text-color="#28b6f6"
      unique-opened>
      <el-menu-item
        index="product" :route="{path: '/product'}">
        <i class="icon-instance"></i>
        <span slot="title">实例管理</span>
      </el-menu-item>
      <el-menu-item
        index="pool">
        <i class="icon-resource"></i>
        <span slot="title">资源管理</span>
      </el-menu-item>
      <el-menu-item
        index="product">
        <i class="icon-product"></i>
        <span slot="title">产品管理</span>
      </el-menu-item>

首先父级el-menu添加router熟悉开启路由模式，子级el-menu-item可以通过index属性，或者:router属性书写路由

**　　补充：只加index属性是错误的，必须加:router属性给定正确路由才行。因为遇到了当只有index属性的时候，当遇到"/list/report"，从list里链接进去的report这种路由时，在点击菜单如果index属性是"monitor"，最后路由会变成"/list/monitor"，与预期不一致。**

二、使用iconfont字体图标

1、官网下载解压，将解压后的文件全部放到assets目录下建iconfont目录下

2、在main.js里面全局导入，然后就可以用了。用的时候class前面需要加上iconfont

import './assets/iconfont/iconfont.css'

三、form表单自定义验证规则

验证手机号（我是独立写了一个validator.js文件的，放在util目录下，然后把所有验证规则都写在这里，使用的时候导入即可）

/**
 * 校验规则文件
 * 触发方式：type=['blur','change']
 */
//定义phone验证全局变量
var validPhone=(rule, value,callback)=>{
    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
    if (!value){
          callback(new Error('请输入电话号码'))
    }else  if (!reg.test(value)){
        callback(new Error('请输入正确的11位手机号码'))
    }else {
          callback()
    }
}
export const validator = {
    required:{
        required:true,
        message:'必填项',
        trigger:'blur'
    },
    email:{
        type:'email',
        message:'请输入正确的邮箱',
        trigger:['blur','change']
    },
    minLen:{
        min:6,
        message: '长度最少6个字符', 
        trigger: 'blur'
    },
    phone:{
        required:true,
        validator:validPhone,
        trigger:['blur','change']
    }
}

//vue组件中使用
<el-form
    ref="login_pwd"
    :model="login_pwd"
    :rules="rules"
    status-icon>
    <el-form-item prop="phone" :rules="[rules.required,rules.phone]">
        <el-input v-model="login_pwd.phone" placeholder="请输入账户"></el-input>
    </el-form-item>

另外一种方式可以直接使用在pattern中书写正则，并且配合elementUI进行表单验证。

pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式。

data(){
    const valPwd = (rule, value, callback) => {            
        if (!value) {
            callback(new Error('请再次输入密码'));
        } else if (value !== this.resetPassword.password) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
      };
    return {
        resetPassword:{},
        rules:{
            password:[{required:true,message:'请输入密码',trigger:'blur'},
                {pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/,message: '密码格式不正确'}],
            repeatPassword:{validator:valPwd,trigger:'blur'},
            phone:[{required:true,message:'请输入电话',trigger:'blur'},
                {pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,message: '请输入正确的11位手机号码'}],
            veriCode:{required:true,message:'请输入密码',trigger:'blur'}
        },
        codeDisabled:false,
        countdown:60
    }
},

//直接使用prop验证即可
<el-form-item prop="repeatPassword">
    <el-input type="password" v-model="resetPassword.repeatPassword" placeholder="重复密码"></el-input>
</el-form-item>

文档里面的