参考网址:https://juejin.im/post/5965943ff265da6c30653879
开发过程中表单校验规则
1.中文、英文,数字和小数点
REG_Chinese_English_Digit: /^[\u4e00-\u9fa5a-zA-Z0-9 、 .\+\(\)()\/]+$/,
REG_Chinese_English_Digit_Message: "只能输入中文、英文、数字,和小数点",
2.只能输入中文、英文、数字
REG_Chinese_English_Digit_lf: /^[\u4e00-\u9fa5a-zA-Z0-9 、 \+\(\)()\/]+$/,
REG_Chinese_English_Digit_lf_Message: "只能输入中文、英文、数字",
2-1.获取省市区正则
var reg = /.+?(省|市|自治区|自治州|县|区)/g // 省市区的正则
var regex = "(?<province>[^省]+省|.+自治区)(?<city>[^自治州]+自治州|[^市]+市|[^盟]+盟|[^地区]+地区|.+区划)(?<county>[^市]+市|[^县]+县|[^旗]+旗|.+区)?(?<town>[^区]+区|.+镇)?(?<village>.*)";
3. 输入字母、数字
REG_English_Digit: /^[a-zA-Z0-9]+$/,
REG_English_Digit_Message: "只能输入字母、数字",
4. 价格格式
REG_Price: /^(\d+(\.\d{1,2})?)$/,
REG_Price_Message: "请输入正确的价格格式",
5. 只能输入数字
REG_Digit: /^[0-9]+$/,
REG_Digit_Message: "只能输入数字",
6.英文
REG_English: /^[a-zA-Z ]+$/,
REG_English_Message: "只能输入英文",
7. 电话号码验证
REG_Phone: /^0\d{2,3}-?\d{7,8}$/,
REG_Phone_Message: "请输入正确的电话号码!",
8. 手机号码验证
REG_tePhone: /^1\d{10}$/,
REG_tePhone_Message: "请输入正确的手机号码!",
9. 电话号码和手机号验证
REG_allPhone: /^(^(\d{3,4}-)?\d{7,8})$|(13[0-9]{9})$/,
REG_allPhone_Message: "请输入正确的手机或固话号码!",
10. 中文验证
REG_chinese: /^[\u4e00-\u9fa5]+$/,
REG_chinese_Message: "请输入正确的中文!",
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: "请输入正确的邮箱!",
12. 只能输入数字和小数点
REG_smallNumber: /^[0-9]+([.]{1}[0-9]+){0,1}$/,
REG_smallNumber_Message: "请输入数字和小数!",
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();
},
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();
},
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();
},
16.校验大于0
validateUpZero: function (rule, value, callback) {
if (value <= 0) {
callback(new Error('不能小于0'));
}
callback();
},
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();
},
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();
},
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();
},
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();
}
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();
}
22.匹配腾讯QQ号
REG_qqNumber: /^(^(\d{3,4}-)?\d{7,8})$|(13[0-9]{9})$/,
REG_qqNumber_Message: "请输入正确的手机或固话号码!",
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;
}
}
案列
新增 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();
}
引入: 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. 自定义指令在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.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;
}
}
});
}
});
使用:
<input
v-integer
type="number"
style="width:40%"
v-model="a"
/>
注意: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()
}
}
}
}
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)
}
})
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)
}
})
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('验证不通过')
}
})
拓展
正则表达式–
验证手机号码: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}
提取信息中的中国电话号码(包括移动和固定电话)😦(\d{3,4})|\d{3,4}-|\s)?\d{7,14}
提取信息中的中国邮政编码:[1-9]{1}(\d+){5}
提取信息中的中国身份证号码:\d{18}|\d{15}
提取信息中的整数:\d+
提取信息中的浮点数(即小数):(-?\d).?\d+
提取信息中的任何数字 :(-?\d)(.\d+)?
提取信息中的中文字符串:[\u4e00-\u9fa5]
提取信息中的双字节字符串 (汉字):[^\x00-\xff]*
-------------------------------------------------------------------------------------------完结-------------------------------------------------