vue中的el-form表单rule校验问题(特殊字符、中文、数字等)

<template>
    <div>
        <el-form size="small" ref="userform" :rules="rulesForm" :model="form">
            <el-form-item label="用户名" prop="userName">
                <el-input v-model.trim="form.userName"  :disabled="addUserDialogTitle == '编辑用户'"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
                <el-input v-model.number="form.phone"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { checkSpecialKey,validateInputPhone } from '@/api/check'
export default {
    name: 'userList',
    data () {
        let validateInputSpecialKey = (rule, value, callback) => {
            if (!checkSpecialKey(value)) {
                callback(new Error("不能含有特殊字符！！"));
            } else {
                callback();
            }
        };
        let validateInputPhone = (rule, value, callback) => {
            if (!checkPhone(value)) {
                callback(new Error("请正确输入联系方式！！"));
            } else {
                callback();
            }
        };
        return {
            form：{},
            rulesForm: {//弹窗输入框检验
                userName: [
                  { required: true,message: "请输入用户名",trigger: "blur"},
                  { min: 3,max: 10,message: "长度在 3 - 10 字符" },
                  { validator: validateInputSpecialKey, trigger: "blur" }
                ],
                phone:[
                  { required: true,message: "请输入联系方式",trigger: "blur"},
                  { validator: validateInputPhone, trigger: "blur" }
                ]
            }
        }
    },
    methods:{
        //提交表单
        onSubmit(){
            this.$refs['userform'].validate((valid) => {
                if (valid) {
                    //TODO 调用接口提交数据
                }else{
                    return false
                }
            })
        }
    }
}
</script>

export function checkSpecialKey(str) {
    let specialKey =
    "[`~!#$^&*()=|{}':;'\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'";
    for (let i = 0; i < str.length; i++) {
        if (specialKey.indexOf(str.substr(i, 1)) != -1) {
        return false;
        }
    }
    return true;
}

export function checkSpecialKeyPath(str) {
    let specialKey =
    "[`~!#$^&*()=|{}';'<>?~！#￥……&*（）——|{}【】‘；”“'。，、？]‘'";
    for (let i = 0; i < str.length; i++) {
        if (specialKey.indexOf(str.substr(i, 1)) != -1) {
        return false;
        }
    }
    return true;
}

export function checkChinese(val) {
    // 正则匹配非中英文及数字的字符
    let reg = /[\u4e00-\u9fa5]/;
    let n = reg.test(val);
    if ( n ) {
        return false
    }
    return true
}

export function checkPhone(val) {
    let reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;
    let n = reg.test(val);
    if ( !n ) {
        return false
    }
    return true
}

export function checkPassword(val) {
    let reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/;
    let n = reg.test(val);
    if ( !n ) {
        return false
    }
    return true
}

export function checkNumberNotNegative(val) {
    let reg = /^\d+(\.\d+)?$/;
    let n = reg.test(val);
    if ( !n ) {
        return false
    }
    return true
}

<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>

rules {    
      name: [ { type: 'string',required: true,message: "名称必填", trigger: 'blur'}, {max: 30,message: "名称长度不能超过30位" }]
      }

name: [ { pattern: 验证条件, required: true, message: "提示信息", trigger: "blur" }]

rules: {
    //验证非空和长度
    name: [{
        required: true,
        message: "站点名称不能为空",
        trigger: "blur"
        },{
        min: 3, 
        max: 5, 
        message: '长度在 3 到 5 个字符', 
        trigger: 'blur' 
    }],
    //验证数值
    age: [{ 
        type: 'number', 
        message: '年龄必须为数字值',
        trigger: "blur"
    }],
    //验证日期
    birthday:[{ 
        type: 'date', 
        required: true, 
        message: '请选择日期', 
        trigger: 'change' 
    }],
    //验证多选
    habit: [{ 
        type: 'array', 
        required: true, 
        message: '请至少选择一个爱好', 
        trigger: 'change' 
    }],
    //验证邮箱
    email: [{ 
        type: 'email', 
        message: '请输入正确的邮箱地址', 
        trigger: ['blur', 'change'] 
    }],
    // 验证手机号
    telephone: [{
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: "请输入正确的手机号码",
        trigger: "blur"
    }],
    // 验证经度 整数部分为0-180小数部分为0到7位
    longitude: [{
        pattern: /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,7})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/,
        message: "整数部分为0-180,小数部分为0到7位",
        trigger: "blur"
    }],
    // 验证维度 整数部分为0-90小数部分为0到7位
    latitude: [{
        pattern: /^(\-|\+)?([0-8]?\d{1}\.\d{0,7}|90\.0{0,6}|[0-8]?\d{1}|90)$/,
        message: "整数部分为0-90,小数部分为0到7位",
        trigger: "blur"
    }]          
}

pattern:/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,

pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,

pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,

pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,

pattern:/^-?[1-9]\d*$/,

pattern:/^[1-9]\d*$/,

pattern:/^[a-z]+$/,

pattern:/^[A-Z]+$/,

pattern:/^[A-Za-z]+$/,

pattern:/^\d{8}(\,\d{8})*$/,

pattern:/^[a-zA-Z0-9]+$/,

pattern:/^\d{2}[a-zA-Z]+$/,

pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,

pattern:/^[\u0391-\uFFE5A-Za-z]+$/,