常用正则表达式（正则）
if(!/^$|^[1-9]\d*$/.test(this.formData.monthQuota)){
this.$message.warning('每月配额只支持输入正数')
return
}
/^$|^[1-9]\d*$/ 只支持整数和空
1、正则校验：校验用户名（支持中文、英文大小写、数字与下划线、中横线、长度在4-30）
var reg = new RegExp("^[_\u4e00-\u9fa5_a-zA-Z0-9]{4,30}$");
console.log(reg.test("正则稍_等待A123正则稍_等待A123正则稍_等待A12"));
2、校验邮箱地址
var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
console.log(reg.test("111111111@qq.com"));
3、正则校验：匹配中文
var reg = new RegExp("^[\u4e00-\u9fa5]$");
console.log(reg.test("正则稍_等待A123正则稍_等待A123正则稍_等待A12"));
4、校验经纬度：(要求-+出现0或1次；0-9之间数字出现1-3个；一个小数点；0-9之间数字出现6-10个）
var reg = new RegExp("^[-]?\d{1,3}\.\d{6,10}$");
console.log(reg.test("0.1234567"));
const rules = {
// 数字
num: {
ex: /^(([0-9]*[1-9][0-9]*)|(0+))$/,
msg: '请输入数字'
},
// 验证英文
english: {
ex: /^.[A-Za-z]+$/,
msg: '请输入英文字符'
},
// 电话(座机)
tel: {
ex: /^\d{3}-\d{7,8}|\d{4}-\d{7,8}$/,
msg: '请输入正确的座机号'
},
// 联系电话
phone: {
ex: /^((\(\d{2,3}\))|(\d{3}[\-]{0,1}))?(\(0\d{2,3}\)|0\d{2,3}[\-]{0,1})?[1-9]\d{6,7}([\-]{0,1}\d{1,4})?$/,
msg: '请输入正确的联系电话'
},
// 手机号码
mobile: {
ex: /^1[0-9]{10}$/,
msg: '请输入正确的手机号'
},
// 邮箱(email)
email: {
ex: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
msg: '请输入正确的email地址'
},
//或者如下：
email: {
ex: /^(([^<>()\\[\]\\.,;:\s@"]+(\.[^<>()\\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/，
msg: '请输入正确的email地址'
},
// ip
ip: {
ex: /^((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))$/,
msg: '请输入正确的ip地址'
},
/**
* URL地址
* @param {*} s
*/
http1:{
msg: /^http[s]?:\/\/.*/.test(s)
}
//或者如下：
http2:{
msg: /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
}
// URL地址, 仅支持http和https开头的
url: {
ex: /^(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-.,@?^=%&:/~+#]*[\w\-@?^=%&/~+#])?$/,
msg: '请输入以http和https开头的网址'
},
// 昵称
nickname: {
ex: /^[\u4E00-\u9FA5\uF900-\uFA2D\w]{2,40}$/i,
msg: '昵称格式错误'
},
// 用户名
username: {
ex: /^[\w]{2,32}$/i,
msg: '用户名格式错误'
},
// 密码
password: {
ex: /^[\w\.;,'~!#@$%^&*()<>\-=:\?+|]+$/,
msg: '密码格式错误'
},
// 汉字
chinese: {
ex: /^[\u4E00-\u9FA5\uF900-\uFA2D\w]{2,40}$/i,
msg: '请输入汉字'
},
// 银行卡号码
bankCard: {
ex: /^[1-9]\d{9,19}$/,
msg: '请输入正确的银行卡号码'
},
// 证件号码
IDNumber: {
ex: /^[a-z0-9A-Z]{0,50}$/,
msg: '请输入正确的证件号码'
},
// 身份证号码,包括15位和18位的
IDCard: {
ex: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{7}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/,
msg: '请输入正确的身份证号码'
},
/**
* 判断身份证号码
*/
const cardid = (code) => {
let list = []
let result = true
let msg = ''
var city = {
11: '北京',
12: '天津',
13: '河北',
14: '山西',
15: '内蒙古',
21: '辽宁',
22: '吉林',
23: '黑龙江 ',
31: '上海',
32: '江苏',
33: '浙江',
34: '安徽',
35: '福建',
36: '江西',
37: '山东',
41: '河南',
42: '湖北 ',
43: '湖南',
44: '广东',
45: '广西',
46: '海南',
50: '重庆',
51: '四川',
52: '贵州',
53: '云南',
54: '西藏 ',
61: '陕西',
62: '甘肃',
63: '青海',
64: '宁夏',
65: '新疆',
71: '台湾',
81: '香港',
82: '澳门',
91: '国外 '
}
if (!validatenull(code)) {
if (code.length == 18) {
if (!code || !/(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(code)) {
msg = '证件号码格式错误'
} else if (!city[code.substr(0, 2)]) {
msg = '地址编码错误'
} else {
// 18位身份证需要验证最后一位校验位
code = code.split('')
// ∑(ai×Wi)(mod 11)
// 加权因子
var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
// 校验位
var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2, 'x']
var sum = 0
var ai = 0
var wi = 0
for (var i = 0; i < 17; i++) {
ai = code[i]
wi = factor[i]
sum += ai * wi
}
if (parity[sum % 11] != code[17]) {
msg = '证件号码校验位错误'
} else {
result = false
}
}
} else {
msg = '证件号码长度不为18位'
}
} else {
msg = '证件号码不能为空'
}
list.push(result)
list.push(msg)
return list
}
// QQ号码
qq: {
ex: /^[1-9]\d{4,11}$/,
msg: '请输入正确的QQ号码'
},
// 0到20位的英文字符和数字
enNum0to20: {
ex: /^[a-z0-9A-Z]{0,20}$/,
msg: '请输入20位以内的英文字符和数字'
},
// 2到100位的中英文字符和空格
cnEnSpace2to100: {
ex: /^[a-zA-Z\u4E00-\u9FA5\s*]{2,100}$/,
msg: '请输入2到100位的中英文字符和空格'
},
// 数字和换行符
numLinefeed: {
ex: /^[0-9\n*]+$/,
msg: '请输入数字和换行符'
},
// 银行卡号码
char0to255: {
ex: /^.{0,255}$/,
msg: '请输入255位以内的字符'
},
// 银行卡号码
bankCard: {
ex: /^[1-9]\d{9,19}$/,
msg: '请输入正确的银行卡号码'
},
// 银行卡号码
bankCard: {
ex: /^[1-9]\d{9,19}$/,
msg: '请输入正确的银行卡号码'
}
}
/**
* 排序值验证，排序值不可以大于255
*/
const validateOrder = (rule, value, callback) => {
if (parseInt(value) > 255) {
return callback(new Error('排序值不可以大于255'))
} else {
callback()
}
}
/**
* 整数范围验证
*/
const validateIntRange = (rule, value, callback) => {
if (parseInt(value, 10) != value || parseInt(value, 10) + '' != value) {
return callback(new Error('请输入整数'))
}
if (parseInt(value, 10) < rule.rmin) {
return callback(new Error('数值不能小于' + rule.rmin))
}
if (parseInt(value, 10) > rule.rmax) {
return callback(new Error('数值不能大于' + rule.rmax))
}
callback()
}
/**
* 浮点数范围验证
*/
const validateFloatRange = (rule, value, callback) => {
if (parseFloat(value, 10) != value) {
return callback(new Error('请输入数值'))
}
if (parseFloat(value, 10) < rule.rmin) {
return callback(new Error('数值不能小于' + rule.rmin))
}
if (parseFloat(value, 10) > rule.rmax) {
return callback(new Error('数值不能大于' + rule.rmax))
}
callback()
}
/**
* 验证多行文本是否格式正确
* @param {*} opt{msgNull, msgError, rule, ruleFun}
* @param {*} value
* @param {*} callback
* @returns
*/
const validateMultiline = (rule, value, callback) => {
//console.log(rule)
if (value == null || value.length == 0) {
return callback(
new Error(rule && rule.message ? rule.message : '请输入内容')
)
}
let arr = value.split(`\n`)
for (let k in arr) {
let line = arr[k]
if (rule && rule.ruleFun && !rule.ruleFun(line)) {
return callback(new Error(rule.message ? rule.message : '格式输入错误'))
} else if (rule && rule.pattern && !rule.pattern.test(line)) {
return callback(new Error(rule.message ? rule.message : '格式输入错误'))
}
}
callback()
}
/* 验证pad还是pc */
const vaildatePc = ()=> {
const userAgentInfo = navigator.userAgent
const Agents = [
'Android',
'iPhone',
'SymbianOS',
'Windows Phone',
'iPad',
'iPod'
]
let flag = true
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false
break
}
}
return flag
}
const validateTextList = opt => {
return {
validate(rule, value, callback) {
console.log(rule)
if (value == null || value.length == 0) {
return callback(new Error(opt && opt.msgNull ? opt.msgNull : '请输入内容'))}
let arr = value.split(`\n`)
for (let k in arr) {
let line = arr[k]
if (opt.ruleFun && !opt.ruleFun(line)) {
return callback(new Error(opt && opt.msgError ? opt.msgError : '格式输入错误'))
} else if (opt.rule && !opt.rule.test(line)) {
return callback(
new Error(opt && opt.msgError ? opt.msgError : '格式输入错误')
)
}
}
callback()
}
}
}
// 测试validateTextList方法
console.log(
validateTextList({ rule: rules.mobile.ex }).validate(
1,
`13811711701\n13811711701`,
function(v) {
console.log(v)
}
)
)
/*
value-format="yyyy-MM-dd" //2018-12-27
value-format="yyyy-MM-dd HH:mm:ss" //2018-12-27 00:00:00
value-format="timestamp" // 1483326245000
*/
const DateTool = {
//日期格式
dateFormats: {
Y: 'yyyy',
M: 'yyyy-MM',
D: 'yyyy-MM-dd'
},
//日期map
dateTypeMap: {
Y: 'year',
M: 'month',
D: 'date'
},
//日期范围map
dateTypeRangeMap: {
Y: 'yearrange',
M: 'monthrange',
D: 'daterange'
},
//日期列表:年、月、日
dateTypeList_ymd: [
{
name: '年',
id: 'Y'
},
{
name: '月',
id: 'M'
},
{
name: '日',
id: 'D'
}
],
//日期列表:年、月
dateTypeList_ym: [
{
name: '年',
id: 'Y'
},
{
name: '月',
id: 'M'
}
],
//日期列表:月、日
dateTypeList_md: [
{
name: '月',
id: 'month'
},
{
name: '日',
id: 'date'
}
],
//设置选择今天以及今天之后的日期
limitGeNow: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7
}
},
//设置选择今天以及今天以前的日期
limitLeNow: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e6
}
},
// 设置选择今天之后的日期（不能选择当天时间）
limitGtNow: {
disabledDate(time) {
return time.getTime() < Date.now()
}
},
//设置选择今天之前的日期（不能选择当天）
limitLtNow: {
disabledDate(time) {
return time.getTime() > Date.now()
}
},
// 设置选择三个月之前到今天的日期
limitLeNowFor3month: {
disabledDate(time) {
let curDate = new Date().getTime()
let three = 90 * 24 * 3600 * 1000
let threeMonths = curDate - three
return time.getTime() > Date.now() || time.getTime() < threeMonths
}
},
// 限制结束日期不能大于开始日期, limitBegin/limitEnd,针对选择范围(type="daterange")的日期筛选
limitBegin: {
disabledDate: time => {
if (this.value2 != '') {
return time.getTime() > Date.now() || time.getTime() > this.value2
} else {
return time.getTime() > Date.now()
}
}
},
limitEnd: {
disabledDate: time => {
return time.getTime() < this.value1 || time.getTime() > Date.now()
}
}
}
const Validator = {
rules,
validateOrder,
validateIntRange,
validateFloatRange,
validateMultiline,
DateTool
}
export default {
install: function(Vue, Option) {
Object.defineProperty(Vue.prototype, '$valid', { value: Validator })
}
}
对于上述封装在具体组件页面中的使用方法：
<el-form-item label="ip地址限制："prop="ipLimit"
:rules="[
{
required: true,
ruleFun: val => {return val > 0 ? true : false},
pattern: $valid.rules.ip.ex,//校验规则
validator: $valid.validateTextList,
message: '请输入ip地址限制',
trigger: 'blur'
}
]"
>
常用正则校验
3685
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
