开发常用 -- 校验表单 -- 账号的校验-正则

要求：必填，仅支持数字字母下划线组合，不支持特殊字符，账号长度应为6-20

html：

      <el-form
        :model="formValidate"
        :rules="rules"
        ref="formValidate"
        label-width="120px"
        style="width: 90%"
      >
        <el-form-item label="账号:" prop="username">
          <el-input v-model.trim="formValidate.username" placeholder="请输入6~20位字符" />
        </el-form-item>
      </el-form>

js： 

引入 validate.js

import validate from "@/utils/validate";

 validate.js文件内容：

/**
 * 检查账号是否合法，只允许字母数字下划线组合
 */
function checkAccount(userAccount){
  if (userAccount == null || userAccount == "") {
    return {data: false, msg: '请输入账号'};
  }

  if (userAccount.length > 20 || userAccount.length < 6) {
    return {data: false, msg: '登录账号长度应为6-20'};
  }
  // 特殊字符判断和汉字
  // /[^\u4e00-\u9fa5]/匹配中文字符，[^\x00-\xff]/匹配双字节字符
  let re = /[^\x00-\xff]/;
  if (/[#\$%\^&\*【】@!！￥?|‘；：”“'。，、？<>+=:]+/g.test(userAccount) || re.test(userAccount)) {
    return {data: false, msg: '账号不允许特殊字符或者中文字符'};
  }

  let reg = /^[0-9a-zA-Z_]{6,20}$/g
  if (reg.test(userAccount)) {
    return {data: true, msg: '账号可用'};
  } else {
    return {data: false, msg: '请输入6~20位字符'};
  }
}

export default {
  checkAccount
}

使用： 

  data() {
    return {
      formValidate: {
        username: '',
      },
      rules: {
        username: [
          {
            required: true,
            message: "个人账号必填，支持数字字母下划线组合",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback, source, options) => {
              let error = [];
              let checkRes = validate.checkAccount(value);
              if (!checkRes.data) {
                error.push(checkRes.msg);
              } else {
                this.checkAccountifexist(); // 判断账号是否已存在
              }
              callback(error);
            },
            trigger: "blur",
          },
        ]
      },
    };
  },