记录：常用校验方法，正则，亲测可用

卤蛋快跑
1,355 阅读1分钟
1.校验大于0的金额，（校验包括：不等于0，0.）

image.png

 rules: {
        amount: [
          { required: true, message: "充值金额不能为空", trigger: "blur" },
          {
            pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.][0-9]*[1-9]$/,
            message: "充值金额必须为大于0的数字值",
            trigger: "blur",
          },
        ],
      },
2.请输入合法金额数字

image.png

// 不允许输入负数
// 不允许输入空格
// 支持小数
 rules: {
      price: [
            { required: true, message: '请输入转账金额', trigger: 'blur' },
            { pattern: /^(\d+)((?:\.\d+)?)$/, message: '请输入合法金额数字' },
          ],
 },
  • 2.1 不允许输入空格 .trim()

1.trim() 方法用于删除字符串的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等。

2.trim() 方法不会改变原始字符串。 trim() 方法不适用于 null, undefined, Number 类型

image.png image.png

onKeyUp="value=value.replace(/[\W]/g, '')"

参考：

  1. 数字和小数点 onkeyup="value=value.replace(/[^\d.]/g,'')

  2. 禁止输入空格 onKeyUp="value=value.replace(/\s+/g,'')"

  3. 只允许输入大于0的整数

template:  
    <el-form-item label="发放云豆数量" prop="num">
       <el-input v-model.number="sendForm.num"></el-input>
    </el-form-item>

export default(){
data() {
    var checkNumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入发放云豆数量"));
      }
       if (value < 0) {
        return callback(new Error("请输入大于0的数字值"));
      }
      if (!Number.isInteger(value)) {
        callback(new Error("请输入数字值"));
      } else {
        callback();
      }
    };
    return {
       rules: {
        num: [{ required: true, validator: checkNumber, trigger: "blur" }],
      },
    }
}
3.# 手机号或邮箱号校验
<el-form-item prop="username"> 
    <el-input v-model="ruleForm.username" placeholder="用户名" /> 
</el-form-item>

data(){
   var checkPhoneOrEmail = function (rule, value, callback) {
      //这个对象同时校验phone和email
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; //邮箱验证
      const reg = /(^1\d{10}$)|(^[0-9]\d{7}$)/; //手机号验证
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else {
        if (value.indexOf("@") > 0) {
          //含有字母@
          setTimeout(() => {
            if (mailReg.test(value)) {
              callback();
            } else {
              callback(new Error("邮箱格式不正确"));
            }
          }, 100);
        } else {
          let re = new RegExp(reg);
          if (!re.test(value)) {
            callback(new Error("手机号格式不正确"));
          } else {
            callback();
          }
        }
      }
    };
}

 rules: {
    pass: [{ validator: validatePass, trigger: "blur" }],
    username: [
      { required: true, message: "用户名不能为空", trigger: "blur" },
       { validator: checkPhoneOrEmail, trigger: "blur" },
    ], //validator传入一个对象
 },
}
  • 3.2 ## 同时校验手机号，座机号码

image.png

data() {
    var checkPhoneOrEmail = function (rule, value, callback) {
      //这个对象同时校验phone和email
      const mailReg = /^0\d{2,3}-?\d{7,8}$/; //  座机
      const reg = /(^1\d{10}$)|(^[0-9]\d{7}$)/; //手机号验证

      if (value.indexOf("-") > 0) {
        //含 -
        setTimeout(() => {
          let mai = new RegExp(mailReg);
          if (!mai.test(value)) {
            callback(new Error("手机号格式不正确"));
          } else {
            callback();
          }
        }, 100);
      } else {
        let re = new RegExp(reg);
        if (!re.test(value)) {
          callback(new Error("手机号格式不正确"));
        } else {
          callback();
        }
      }
    };
    
    rules: {       
        invoicingPhone: [
          { required: true, message: "开票电话不能为空", trigger: "blur" },
          { validator: checkPhoneOrEmail, trigger: "blur" } 
        ]  
      },
  • 3.3 非必填校验 手机号和邮箱

image.png

data() {
    var checkPhoneOrEmail = function (rule, value, callback) {
      //这个对象同时校验phone和email
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; //邮箱验证
      const reg = /(^1\d{10}$)|(^[0-9]\d{7}$)/; //手机号验证
      if (value) {
        if (value.indexOf("@") > 0) {
          //含有字母@
          setTimeout(() => {
            if (mailReg.test(value)) {
              callback();
            } else {
              callback(new Error("邮箱格式不正确"));
            }
          }, 100);
        } else {
          let re = new RegExp(reg);
          if (!re.test(value)) {
            callback(new Error("手机号格式不正确"));
          } else {
            callback();
          }
        }
      } else {
        callback;
      }
    };
    
     warningRules: {
        balanceEarlyWarning: [
          { required: true, message: "请设置预警金额", trigger: "blur" },
        ],
        mobileTwo: [
          { required: false, validator: checkPhoneOrEmail, trigger: "blur" },
        ],
        mobileThree: [
          { required: false, validator: checkPhoneOrEmail, trigger: "blur" },
        ],
     },
常用校验参考
/**
 * @用法:  RegsLib.en.test('abc')  ->  true
 */

export default {
  /*
   * 数字相关
   */
  //正数（可含小数、0）
  posiNum: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/,

  //正整数
  posiInt: /^[1-9]\d*$/,

  //0或正整数
  posiInt0: /^(0|[1-9][0-9]*)$/,

  //2位的数字
  numLen2: /^[0-9]{2}$/,

  // 2-3位的数字：
  numLen2or3: /^\d{1,3}$/,

  // 非零开头的最多带两位小数的正数：1 | 1.1 | 1.11
  posiFloat2: /^([1-9][0-9]*)+(\.[0-9]{1,2})?$/,

  // 带1-2位小数的正数或负数：
  float1or2: /^(\-)?\d+(.\d{1,2})?$/,

  // 非零的负整数：
  negativeInt: /^-[1-9]\d*$/,

  // 负数或0：
  negative0: /^-[1-9]\d*|0$/,

  // 负整数或0：
  negativeInt0: /^(-[1-9]\d*|0)$/,

  // 负浮点数：
  negativeFloat: /^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$/,

  // 正浮点数：
  posiFloat: /^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$/,

  // 浮点数：
  float: /^(-?\d+)(\.\d+)?$/,

  /*
   * 字符相关
   */

  // 英文和数字：
  numEn: /^[A-Za-z0-9]+$/,

  // 长度为2-4的所有字符：
  en2to4: /^.{2,4}$/,

  // 英文字母：
  En: /^[A-Za-z]+$/,

  // 大写英文字母：
  EN: /^[A-Z]+$/,

  // 小写英文字母：
  en: /^[a-z]+$/,

  // 小写英文字母：
  cn: /^[\u4E00-\u9FA5A]+$/,

  // 数字、字母、下划线
  numEn_: /^\w+$/,

  // 中文、英文、数字、下划线：
  numEnCn_: /^[\u4E00-\u9FA5A-Za-z0-9_]+$/,

  // 中文、英文、数字：
  numEnCn: /^[\u4E00-\u9FA5A-Za-z0-9]+$/,

  // 含有^%&',;=?$\”等字符：
  illegal: /[^%&',;=?$\x22]+/,

  // Email地址：
  email: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,

  // 护照：
  passport: /^1[45][0-9]{7}|G[0-9]{8}|P[0-9]{7}|S[0-9]{7,8}|D[0-9]+$/,

  // 手机号码：
  mobile: /^1[345789]\d{9}$/,

  // 座机号码:
  telephone: /0\d{2,3}-\d{5,9}|0\d{2,3}-\d{5,9}/,

  // 座机或手机号:
  teleMobile: /^((0\d{2,3}-\d{5,9}|0\d{2,3}-\d{5,9})|(1[34578]\d{9}))$/,

  // 身份证号(15位、18位数字)：
  idCard:
    /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,

  // 日期： 2017-1-1或2017/1/1
  date: /^\d{4}(-|\/)\d{1,2}(-|\/)\d{1,2}$/,

  // 时间： 10:00:00
  time: /^([01]?\d|2[0-3]):[0-5]?\d:[0-5]?\d$/,

  // 日期+时间： 2017-1-1 10:00:00
  datetime: /^\d{4}(-|\/)\d{1,2}(-|\/)\d{1,2}\s([01]?\d|2[0-3]):[0-5]?\d:[0-5]?\d$/,

  // 一年的12个月(01～09和1～12)：
  month: /^(0?[1-9]|1[0-2])$/,

  // 一个月的31天(01～09和1～31)：
  day: /^((0?[1-9])|((1|2)[0-9])|30|31)$/,

  //腾讯QQ号：
  qq: /[1-9][0-9]{4,}/,

  //中国邮政编码：
  postcode: /[1-9]\d{5}(?!\d)/,

  //IP地址：
  ip: /\d+\.\d+\.\d+\.\d+/,

  //域名：
  url: /^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*([\?&]\w+=\w*)*/,

  //域名(http开头):
  urlHttp: /^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/,

  // 车牌:
  licencePlate:
    /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/,

  //银行卡：
  bankCardNum: /^([1-9]{1})(\d{15}|\d{18})$/,

  //价格：
  price: /(^[1-9]\d*(\.\d{1,2})?$)|(^[0]{1}(\.\d{1,2})?$)/
  // https://www.oschina.net/question/872287_155849
}
  • 使用
  • 如：金额：非必填，允许保留两位小数

image.png

image.png

image.png

image.png

image.png

校验输入框只能输入数字或者是数组里面包含数字的正则

image.png pattern: /^(\d+|\[\d+(?:\.\d+)?(?:,\d+(?:\.\d+)?)*\])$$/

8c86b724970efab727ce7426242e54b.png

字节的Arco.design的表单自定义校验
  • 注意饿了么的是 pattern：xxxx
  • Arco.design的是 match：xxxx

最多只允许输入两位小数 /^(\d+)(\.\d{1,2})?$/

只允许输入数字值 /^(\d+)((?:\.\d+)?)$/ 

  const rules = {
    incomeDe: [
      { required: true, message: '回收扣点比例不能为空', trigger: "blur" },
      {
        match: /^(\d+)((?:\.\d+)?)$/, 
        message: "请收入正确的回收扣点比例",
        trigger: "blur",
      },
    ],
   phone: [
      { required: true, message: '请输入手机号' },
      {
        match: /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/,
        message: '请输入正确的手机格式'
      }
    ],
  email: [
      { required: true, message: '请输入邮箱' },
      { type: 'email', message: '请输入正确的邮箱格式' }
    ],
  username: [{ required: true, message: '请输入用户名称' }]
  }

菜鸟工具常用校验规则：https://c.runoob.com/front-end/854/

参考：前端Vue中常用rules校验规则 juejin.cn/post/684490…

avatar
文章
阅读
粉丝