常用正则校验

常用正则表达式

//用户名正则，4到16位（字母，数字，下划线，减号）
 /^[a-zA-Z0-9_-]{4,16}$/
//是否数字
/^\d+$/
//是否小写字母
/^[a-z]+$/
//是否大写字母
/^[A-Z]+$/
//是否特殊字符
/^[+\-=_@#$%^&;:,.<>/~\\\[\](){}?!|]+$/
//url地址校验
/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?$/g

/^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/
//判断是否前后有空格
/^\s+|\s+$/
//校验手机号
/^[1][3-9][0-9]{9}$/
//是否手机号码或者固话
/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/
//是否固话
/0\d{2,3}-\d{7,8}/
//是否身份证号码
/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
//是否邮箱
/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/
//验证是否1-99之间
/^[1-9][0-9]{0,1}$/
//验证端口值是否在[0,65535]之间
/^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
//两位小数验证
/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
//密码校验 6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种
/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/
//账号校验 必须为6-20位字母和数字组合
/^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/
//纯数字校验
/^\d+$|^\d+[.]?\d+$/
//最多一位小数
/^[0-9]+([.]{1}[0-9]{1})?$/
//身份证号
/^\d{15,17}$/
//html注释
/<!--[\s\S]*?-->/g
//中文姓名
/^(?:[\u4e00-\u9fa5·]{2,16})$/
//密码强度校验，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/

使用方法

1、创建公用方法 在src下utils文件夹中，新建validate.js文件，vue文件按需引入

• validate.js文件，代码如下：

export function '函数名' (rule, value, callback) {
  if (!value) {
    return callback()
  }
  const pattern = '正则表达式'
  if (pattern.test(value)) {
    return callback()
  }
  return callback(new Error('格式错误！请输入正确的格式！'))
}

• vue文件中，按需引入 import { '函数名' } from '@/utils/validate.js'

data声明

    rules: {
        name: [
            { required: true, message: '必填', trigger: 'blur' },
            { validator: '函数名', trigger: 'blur' }
         ]
    }

DOM使用

    <el-form :model="attrForm" ref="attrForm" :rules="rules">
        <el-form-item label="姓名" prop="name">
            <el-input v-model.trim="attrForm.name"></el-input>
        </el-form-item>
    </el-form>

2、组件内直接使用 在vue文件中，data内return之前声明，直接使用

声明

 data () {
  const '函数名' = (rule, value, callback) => {
  if (!'正则表达式'.test(value)) {
    callback(new Error('错误提示'));
  } else {
    callback();
  }
  }
    return {
      ruleForm: {
        pass: '',
      },
      rules: {
        name: [
          { validator: '函数名', trigger: 'blur' }
        ]
      }
    }
}
 

DOM使用

    <el-form :model="attrForm" ref="attrForm" :rules="rules">
        <el-form-item label="姓名" prop="name">
            <el-input v-model.trim="attrForm.name"></el-input>
        </el-form-item>
    </el-form>

vscode的插件：any-rule正则大全

vscode应用商店中搜索"any-rule"安装

::: tip 使用方法

• 方式1:

按F1(mac下fn+F1)打开正则列表. 输入关键词搜索, 比如"手机".

• 方式2:

右键选择"🦕正则大全".

• 方式3:

在代码任意位置输入"@zz". :::