开发过程中表单校验规则_v-integer

参考网址：https://juejin.im/post/5965943ff265da6c30653879

开发过程中表单校验规则

1.中文、英文，数字和小数点

  REG_Chinese_English_Digit: /^[\u4e00-\u9fa5a-zA-Z0-9 、 .\+\(\)（）\/]+$/,
  REG_Chinese_English_Digit_Message: "只能输入中文、英文、数字，和小数点",
1
2

2.只能输入中文、英文、数字

  REG_Chinese_English_Digit_lf: /^[\u4e00-\u9fa5a-zA-Z0-9 、 \+\(\)（）\/]+$/,
  REG_Chinese_English_Digit_lf_Message: "只能输入中文、英文、数字",
1
2

2-1.获取省市区正则

var reg = /.+?(省|市|自治区|自治州|县|区)/g // 省市区的正则
var regex = "(?<province>[^省]+省|.+自治区)(?<city>[^自治州]+自治州|[^市]+市|[^盟]+盟|[^地区]+地区|.+区划)(?<county>[^市]+市|[^县]+县|[^旗]+旗|.+区)?(?<town>[^区]+区|.+镇)?(?<village>.*)";
1
2

3. 输入字母、数字

REG_English_Digit: /^[a-zA-Z0-9]+$/,
REG_English_Digit_Message: "只能输入字母、数字",
1
2

4. 价格格式

REG_Price: /^(\d+(\.\d{1,2})?)$/,
REG_Price_Message: "请输入正确的价格格式",
1
2

5. 只能输入数字

 REG_Digit: /^[0-9]+$/,
 REG_Digit_Message: "只能输入数字",
1
2

6.英文

  REG_English: /^[a-zA-Z ]+$/,
  REG_English_Message: "只能输入英文",
1
2

7. 电话号码验证

 REG_Phone: /^0\d{2,3}-?\d{7,8}$/,
 REG_Phone_Message: "请输入正确的电话号码！",
1
2

8. 手机号码验证

 REG_tePhone: /^1\d{10}$/,
 REG_tePhone_Message: "请输入正确的手机号码！",
1
2

9. 电话号码和手机号验证

  REG_allPhone: /^(^(\d{3,4}-)?\d{7,8})$|(13[0-9]{9})$/,
  REG_allPhone_Message: "请输入正确的手机或固话号码！",
1
2

10. 中文验证

 REG_chinese: /^[\u4e00-\u9fa5]+$/,
 REG_chinese_Message: "请输入正确的中文！",
1
2

11. 邮箱验证

 REG_email: /^(([0-9a-zA-Z]+)|([0-9a-zA-Z]+[_.0-9a-zA-Z-]*[0-9a-zA-Z]+))@([a-zA-Z0-9-]+[.])+([a-zA-Z]{2}|net|NET|com|COM|gov|GOV|mil|MIL|org|ORG|edu|EDU|int|INT)$/,
 REG_email_Message: "请输入正确的邮箱！",
1
2

12. 只能输入数字和小数点

REG_smallNumber: /^[0-9]+([.]{1}[0-9]+){0,1}$/,
REG_smallNumber_Message: "请输入数字和小数！",
1
2

13.校验非空、数值、数值为0~100之间

validateZeroToHundred: function (rule, value, callback) {
  let reg = /^[0-9]+$/;
  if (value === '' || isNaN(value) || Math.floor(value) != value|| reg.test(value) != true || value < 0 || value > 100) {
   callback(new Error('请输入0~100之间的正整数'));
  }
   callback();
},
1
2
3
4
5
6
7

14.校验大于0的正整数

validatePositiveInteger: function (rule, value, callback) {
 let reg = /^[0-9]+$/;
 if (value === '' || isNaN(value) || reg.test(value) != true || value <= 0) {
   callback(new Error('请输入大于0的正整数'));
 }
 callback();
},
1
2
3
4
5
6
7

15.校验必须输入0.1~99.9之间

validateDoubleBelowHundred: function (rule, value, callback) {
  if (value === '' || isNaN(value) || value < 0.1 || value > 99.9) {
    callback(new Error('请输入0.1~99.9之间的系数'));
  } else if (value.split(".")[1]) {
    if (value.split(".")[1].length > 1) {
      callback(new Error('只能输入一位小数！'));
    }
  }
  callback();
},
1
2
3
4
5
6
7
8
9
10

16.校验大于0

validateUpZero: function (rule, value, callback) {
  if (value <= 0) {
    callback(new Error('不能小于0'));
  }
  callback();
},
1
2
3
4
5
6

17.校验1~127之间的整数

validateTinyint: function (rule, value, callback) {
 let reg = /^[0-9]+$/;
 if (value === '' || isNaN(value) || reg.test(value) != true || (value <= 0 || value > 127)) {
   callback(new Error('请输入1~127之间的整数'));
 }
 callback();
},
1
2
3
4
5
6
7

18.价格

validatePrice: function (rule, value, callback) {
  let reg = /^([-]{0,1})(\d+(\.\d{1,2})?)$/;
  if (value != '' && value != null && !reg.test(value)) {
    callback(new Error('请输入正确的价格格式'));
  }
  if (value < 0) {
    callback(new Error('价格不能小于0'));
  }
  if (value > 999999999999.99) {
    callback(new Error('价格不能大于999999999999.99'));
  }
  callback();
},
1
2
3
4
5
6
7
8
9
10
11
12
13

19.整数值小于999999999

validateInt: function (rule, value, callback) {
  let reg = /^[0-9]+$/;
  if (value != '' && value != null && !reg.test(value)) {
    callback(new Error('请输入整数值'));
  }
  if (value > 999999999) {
    callback(new Error('不能大于999999999'));
  }
  callback();
},
1
2
3
4
5
6
7
8
9
10

20.ip地址

validateIP: function (rule, value, callback) {
 let reg = /^(\d+)\.(\d+)\.(\d+)\.(\d+)+$/;
 if (value != '' && value != null && !reg.test(value)) {
   callback(new Error('请输入正确的ip地址'));
 }
 callback();
}
1
2
3
4
5
6
7

21.8-16位数字和字母密码

validatePassWord: function (rule, value, callback) {
 let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
 if (value != '' && value != null && !reg.test(value)) {
   callback(new Error('请输入正确格式的密码！'));
 }
 callback();
}
1
2
3
4
5
6
7

22.匹配腾讯QQ号

  REG_qqNumber: /^(^(\d{3,4}-)?\d{7,8})$|(13[0-9]{9})$/,
  REG_qqNumber_Message: "请输入正确的手机或固话号码！",
1
2

E-mail 验证
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

function validateForm(){
  var x=document.forms["myForm"]["email"].value;
  var atpos=x.indexOf("@");
  var dotpos=x.lastIndexOf(".");
  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
    alert("不是一个有效的 e-mail 地址");
    return false;
  }
}
1
2
3
4
5
6
7
8
9

案列

新增 util/RegExpression.js  文件
export default {
 //中文、英文，数字和小数点
 REG_Chinese_English_Digit: /^[\u4e00-\u9fa5a-zA-Z0-9 、 .\+\(\)（）\/]+$/,
 REG_Chinese_English_Digit_Message: "只能输入中文、英文、数字，和小数点",}
 
 validateIP: function (rule, value, callback) {
   let reg = /^(\d+)\.(\d+)\.(\d+)\.(\d+)+$/;
   if (value != '' && value != null && !reg.test(value)) {
     callback(new Error('请输入正确的ip地址'));
   }
   callback();
 }
1
2
3
4
5
6
7
8
9
10
11
12
13

引入: import RegExpression from “@/util/RegExpression.js”;

页面使用:

startTime:[
   { max: 20, message: '长度不能超过20 个字符', trigger: 'change' },
   { min: 10, message: '长度不能少于10 个字符', trigger: 'change' },
   { validator: RegExpression.validateIP, trigger: "change" },
   { pattern: RegExpression.REG_Chinese_English_Digit, message: RegExpression.REG_Chinese_English_Digit_Message, trigger: "change" },
   { pattern: RegExpression.REG_Chinese_English_Digit,message: RegExpression.REG_Chinese_English_Digit_Message, trigger: "blur"}  
 ]
1
2
3
4
5
6
7

1. 自定义指令在vue中的校验封装

地址：https://www.jianshu.com/p/ce451ef75fa0

1-1.input 只能输入正整数

Vue.directive('integer', {
 inserted: function (el) {
   el.addEventListener("keypress", function (e) {
     e = e || window.event;
     let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
     if (e.key == 0 && !e.target.value) {
       e.preventDefault();
     }
     let re = /\d/;
     if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
       if (e.preventDefault) {
         e.preventDefault();
       } else {
         e.returnValue = false;
       }
     }
   });
 }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1-2.input 只能输入正数，小数点可以带两位

Vue.directive('floatInteger', {
  inserted: function (el) {
    el.addEventListener("keypress", function (e) {
      e = e || window.event;
      let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
      let re = /\d/;
      if (charcode == 46) {
        if (el.value.includes('.')) {
          e.preventDefault();
        }
        return;
      } else if (el.value.includes('.') && el.value.split('.')[1].length > 1) {
        e.preventDefault();
      } else if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
        if (e.preventDefault) {
          e.preventDefault();
        } else {
          e.returnValue = false;
        }
      }
    });
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

使用:

     <input
       v-integer
       type="number"
       style="width:40%"
       v-model="a"
     />
1
2
3
4
5
6

注意：type="number"是防止切换输入法的时候，防止中文输入！

2.自定义指令在 element-ui的校验封装

let hasPoint = false
let pointNum = 2
const VueDirectiveObject = {
  findInput: function(el) {
    return el.classList.contains('el-input') ? el.querySelector('input') : el
  },
  keepNumber: function(event) {
    var hasPoint = this.hasPoint 
    var pointNum = this.pointNum
    this.value = hasPoint ? this.value.replace(/[^0-9.]/g, '').replace(/\./, '*').replace(/\./g, '').replace(/\*/, '.').replace(/^\./, '0.').replace(new RegExp('^(\\d+)\\.(\\d{' + Math.abs(pointNum) + '}).*$'), '$1.$2') : this.value.replace(/\D/g, '').replace(/\./g, '')
  },
  keepNumberAndLetter() {
    this.value = this.value.replace(/[^a-zA-Z0-9]/g, '')
  },
  onkeydown: function(event) {
    if (!(event.keyCode === 46) && !(event.keyCode === 8) && !(event.keyCode === 37) && !(event.keyCode === 39) && !(event.keyCode === 9) && !(event.key === '.' && this.hasPoint) && !(event.keyCode === 13) &&
    !((event.keyCode === 67 || event.keyCode === 86 || event.keyCode === 65 || event.keyCode === 88) && event.ctrlKey && !event.altKey && !event.shiftKey)
  ) {
      // 数字 小键盘数字
      if (!((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105))) {
        VueDirectiveObject.keepNumber.apply(this, event)
        event.stopPropagation()
        event.preventDefault()
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

2-1限制只能输入数字-使用(保留两位就是v-numberOnly:point2 )

Vue.directive('numberOnly', {
    bind: function(el, binding, vnode) {
      // 判断是否需要小数点
      const arg = binding.arg || ''
      const el2 = VueDirectiveObject.findInput(el)
      hasPoint = arg.indexOf('point') !== -1
      pointNum = parseInt(arg.replace('point', ''), 10) || 2
      if (el2) {
        el2.hasPoint = hasPoint
        el2.pointNum = pointNum
        el2.style.imeMode = 'disabled'
        el2.addEventListener('input', VueDirectiveObject.keepNumber)
        el2.addEventListener('keydown', VueDirectiveObject.onkeydown)
        el2.addEventListener('keyup', VueDirectiveObject.keepNumber)
        el2.addEventListener('blur', VueDirectiveObject.keepNumber)
      }
    },
    unbind: function(el) {
      let fel = VueDirectiveObject.findInput(el)
      fel.removeEventListener('input', VueDirectiveObject.keepNumber)
      fel.removeEventListener('keydown', VueDirectiveObject.onkeydown)
      fel.removeEventListener('keyup', VueDirectiveObject.keepNumber)
      fel.removeEventListener('blur', VueDirectiveObject.keepNumber)
    }
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

2-2 限制只能输入数字和字母 （（//使用 ---- v-onlyNumberAndLetter））

Vue.directive('onlyNumberAndLetter', {
  bind: function(el, binding) {
    // 判断是否需要小数点
    const el2 = VueDirectiveObject.findInput(el)
    if (el2) {
      el2.style.imeMode = 'disabled'
      el2.addEventListener('input', VueDirectiveObject.keepNumberAndLetter)
      el2.addEventListener('keyup', VueDirectiveObject.keepNumberAndLetter)
      el2.addEventListener('change', VueDirectiveObject.keepNumberAndLetter)
      el2.addEventListener('blur', VueDirectiveObject.keepNumberAndLetter)
    }
  },
  unbind: function(el) {
    let fel = VueDirectiveObject.findInput(el)
    fel.removeEventListener('input', VueDirectiveObject.keepNumberAndLetter)
    fel.removeEventListener('keyup', VueDirectiveObject.keepNumberAndLetter)
    fel.removeEventListener('change', VueDirectiveObject.keepNumberAndLetter)
    fel.removeEventListener('blur', VueDirectiveObject.keepNumberAndLetter)
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3.validateField 部分校验

let fieldsToValidate = ['username', 'password', 'gender', 'email'];
let _self = this;
Promise.all(fieldsToValidate.map(item => {
 let p = new Promise(function (resolve, reject) {
   _self.$refs['form'].validateField(item, (error) => {
     resolve(error)
   })
 });
 return p;
})).then((data) => {
 console.info(data)
 // data 里是各个字段的验证错误信息, 如果为空串则认为验证通过, 如果数组里全为空串则所有验证通过
 // 判断data 里是否全是空串
 // 去除数组空值
 data = data.filter(item => item)
 if(!data.length){
   console.log('通过验证')
 } else {
   console.log('验证不通过')
 }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

拓展

正则表达式–
验证手机号码:13[0-9]{9}
实现手机号前带86或是+86的情况:^((+86)|(86))?(13)\d{9}$
电话号码与手机号码同时验证:(^(\d{3,4}-)?\d{7,8})$|(13[0-9]{9})
提取信息中的网络链接:(h|H)(r|R)(e|E)(f|F) = (’|")?(\w|\|/|.)+(’|"| |>)?
提取信息中的邮件地址:\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)
提取信息中的图片链接:(s|S)(r|R)(c|C) = (’|")?(\w|\|/|.)+(’|"| |>)?
提取信息中的IP地址:(\d+).(\d+).(\d+).(\d+)
提取信息中的中国手机号码:(86)013\d{9}
提取信息中的中国固定电话号码:((\d{3,4})|\d{3,4}-|\s)?\d{8}
提取信息中的中国电话号码（包括移动和固定电话）