【JavaScript】常见的表单校验

一. 常见的正则表达式

1. input中允许输入年或年月或年月，即 2023 或 2023-09 或 2023-09-11

 pattern:/(^[1-2][0-9][0-9][0-9]-([1][0-2]|0?[1-9])-([12][0-9]|3[01]|0?[1-9])$)|(^[1-2][0-9][0-9][0-9]-([1][0-2]|0?[1-9])$)|(^[1-2][0-9][0-9][0-9]$)/

2. 只允许填入英文,数字,下划线和 -

 pattern: /^[A-Za-z0-9_-]+$/

3. 合法金额 xx.ss

不限长度，校验是否符合数字的格式，包括整数和小数：pattern: /^(\d+)((?:\.\d+)?)$/,

长度为1~20的合法金额：pattern: /^[0-9,"."]{1,20}$/

不限长度，小数点后必须是两位的金额： pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{0,2})?$/,

4. 该数字是否大于0的数字（常用于【排序】字段）

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

5. 校验数组

<template>
 <el-form inline-message :model="form" :rules="rules">
   <el-descriptions-item v-else label="文件权限:" :span="1">
      <el-form-item prop="checkList">
          <el-checkbox v-model="form.fileBrowse" false-lable="0" true-label="1">
                浏览
          </el-checkbox>
          <el-checkbox v-model="form.fileDownload" false-lable="0" true-label="1">
                下载
          </el-checkbox>
      </el-form-item>
   </el-descriptions-item>
 <el-form>
</template>

<script>

<script>
export default {
    data() {
      var validatePremessions = (rule, value, callback) => {
        let result = validatenPremession(
          this.form.fileBrowse,
          this.form.fileDownload
        )
        if (result == false) {
          callback(new Error('请至少选择一种权限'))
        } else {
          callback()
        }
      }
      return {
        form: {
          borrowType: '0',
          fileBrowse: '0',
          fileDownload: '0',
          expectReturnTime: '',
          borrowDays: null,
        },
        rules: {
          checkList: [
            { required: true, validator: validatePremessions, trigger: 'blur' },
          ],
        },
    },
}

6. 长度不少于8个字符，需包含大小写英文、数字、特殊字符(！@#$%&?)

 pattern: /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%&?])(?!.*\s).{8,}$/,

7. 校验邮箱

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

8. 只允许输入大写字母 / 数字 / 大写字母和数字的结合

 pattern: /^[A-Z0-9]+$/

9. 由任意数字组成至少 1 个长度的字符串

 pattern: /^[0-9]{1,}$/

10. 支持输入一个或多个不包含空格和双引号的字符

 pattern: "[^ \x22]+"

11. 校验电话号码

 pattern: /^\d{3}-\d{8}|\d{4}-\d{7}|\d{7}|\d{8}$/

12. 校验手机号吗

 pattern: /^1[3-9]\d{9}$/

14. 长度不限，至少包含一个汉字、数字或者英文字母（大小写不限）

 pattern: /^[\u4e00-\u9fa50-9A-Za-z]{1,}$/

13. 只允许输入汉字

 pattern: /^[\u4e00-\u9fa5]+$/

14. 只允许输入长度小于 100的 非字符串

 pattern: /^[^\s]{0,100}$/

15. 密码校验（长度不少于8个字符，需包含大小写英文、数字、特殊字符(！@#$%&?)）

pattern: /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%&?])(?!.*\s).{8,}$/

16. 短信验证（6位数字）

pattern: /^\d{6}$/

二. 示例说明

1. pattern: /^(\d+)((?:\.\d+)?)$/

① ^ ：表示匹配字符串的开始位置。
② (\d+) ：表示匹配一个或多个数字，其中\d表示匹配任意一个数字，+表示匹配前面的元素一次或多次。
③ ((?:.\d+)?) ：表示匹配一个可选的小数部分，其中.表示匹配小数点，\d+表示匹配一个或多个数字，(?:…)表示非捕获分组，?表示匹配前面的元素零次或一次。
④ $ ：表示匹配字符串的结束位置。
例如：“123”，“3.14”，“0.5”，“100.”

2. pattern: /^[\u4e00-\u9fa50-9A-Za-z]{15,20}$/

① ^ ： 表示匹配字符串的开头。
② [\u4e00-\u9fa5] ：表示匹配汉字的范围，\u4e00 和 \u9fa5 是 Unicode 编码中汉字的起始和结束编码。
③ 0-9 ：表示匹配数字 0 到 9。
④ A-Za-z ：表示匹配英文字母，包括大小写。
⑤ {15,20} ：表示前面的字符集合长度在 15 到 20 之间。
⑥ $ ：表示匹配字符串的结束位置。
综上：这个正则表达式匹配的字符串必须由汉字、数字或者英文字母组成，且长度在 15 到 20 个字符之间。

3. pattern: /^(\d{3}-\d{3}-\d{4})|(1[3-9]\d{9})$/

① ^: 匹配字符串的开始。
② (\d{3}-\d{3}-\d{4}) ：这部分模式匹配了 xxx-xxx-xxxx 格式的电话号码，其中 \d 匹配任意一个数字，{n} 表示前面的模式匹配 n 次。因此 \d{3}-\d{3}-\d{4} 匹配了三个数字-三个数字-四个数字的模式。
③ | ：表示逻辑上的“或”操作，即两边的表达式选其一。
④ (1[3-9]\d{9}) ：这部分模式匹配了中国大陆的手机号码，以数字 1 开头，接着是 3 到 9 之间的数字，后面跟着 9 个数字。因此，1[3-9]\d{9} 匹配了符合手机号码格式的模式。
⑤ $ ：表示匹配字符串的结束位置。
综上：这个正则表达式可以匹配两种格式的电话号码：xxx-xxx-xxxx 格式的电话号码或者中国大陆的手机号码。

4. pattern: ^(0|[1-9][0-9]*|-[1-9][0-9]*)$/

(0|[1-9][0-9]|-[1-9][0-9]): 这个部分包含了三种可能的情况：
① 0 ： 匹配单个零。
② |[1-9][0-9]* ： 或者匹配一个不以零开头的数字，这个数字可以是个位数或多位数。
③ |-[1-9][0-9]* ：或者匹配一个以负号开头的不以零开头的数字，这个数字可以是负数的个位数或多位数。
综上：这个正则表达式匹配的是包含零、正整数或负整数的字符串。如果是正整数，它可以是个位数或多位数；如果是负整数，它也可以是个位数或多位数。但不包括小数或其他非整数形式。

5. pattern: /^-?\\d+(,\\d{3})*(\\.\\d{1,2})?$/

① -?: 可选的负号。
② \d+: 一个或多个数字。
③ (,\d{3})*: 可选的千位分隔符，逗号后跟三位数字，可以重复零次或多次。
④ (\.\d{1,2})?: 可选的小数部分，小数点后跟一到两位数字。
综上：匹配形如 “-123,456.78” 或 “789.12” 的数字格式

6. pattern: /^[\u4e00-\u9fa5\\（）(),，0-9]+$/

① [\u4e00-\u9fa5]: 匹配任意一个中文字符。
② \（）(): 匹配括号。
③ ,，: 匹配逗号。
④ 0-9: 匹配数字。
⑤ + ：指定前面字符串重复出现n次
综上：这个正则表达式可以匹配由中文字符、数字以及括号和逗号组成的字符串。

7. pattern: /^\d{3}-\d{8}|\d{4}-\d{7}|\d{7}|\d{8}$/

① ^\d{3}-\d{8}: 以三位数字开头，后跟一个连字符，然后是八位数字。
② |\d{4}-\d{7}: 或者以四位数字开头，后跟一个连字符，然后是七位数字。
③ |\d{7}: 或者是七位数字。
④ |\d{8}: 或者是八位数字
综上：该正则表达式可以匹配形如 “123-45678901”、“5678-1234567”、“7654321” 或 “87654321” 的电话号码格式。