前言
前段时间项目中有关于一个form表单输入内容的验证,涉及到手机号、邮箱和ip地址的输入验证,特此整理一番,方便查阅。
关于文件的下载,以前常用的模式是后台提供一个文件地址,前端用window.open地址打开的形式下载,这次后端因为文件地址不固定,所以返回了一个文件流,需要前端将文件流进行封装保存,特地查了些网上的写法,下文中的文件流保存的写法亲测有效,可以使用。
邮箱正则判断
/**
* @description 验证邮箱格式是否正确
* @param {string} val 需要验证的邮箱
* @return {boolean}
*/
export function isEmail(val: any) {
const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
return reg.test(val);
}
手机号正则判断
/**
* @description 验证手机号格式是否正确
* @param {string} tel 需要验证的手机号
* @return {boolean}
*/
export function isPhone(tel: any) {
// 宽松验证
const reg = /^1[3456789]\d{9}$/;
// const reg = /^1[3|4|5|8][0-9]\d{4,8}$/;
// 严格验证 (时间截止为:2018年1月11日内所有支持的号段)
// let reg = /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/
return reg.test(tel);
}
IP地址正则验证
/**
* 最简洁的IP判断正则表达式
* 25[0-5] 250-255
* 2[0-4]\d 200-249
* [01]?\d\d? 000-199(0-9 \d)(10-99 \d\d)(100-99 1\d\d)
* ($|(?!\.$)\.) 结束 或者 不以.结束的加上.
* (?!^0{1,3}(\.0{1,3}){3}$) 排除 0.0.0.0 /^(?!^0{1,3}(\.0{1,3}){3}$)((25[0-5]|2[0-4]\d|[01]?\d\d?)($|(?!\.$)\.)){4}$/
* (?!^255(\.255){3}$) 排除 255.255.255.255
*/
const reg = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)($|(?!\.$)\.)){4}$/
let ipValid = reg.test(value)
if (!ipValid) {
Message.error('限制登录IP输入格式不正确!')
return false
}
js文件流保存
html片段:
<el-button type="primary" @click="downloadLogs" :loading="downLoading">下载导出日志</el-button>
javascript片段
downloadLogs() {
this.downLoading = true
this.$http({
url: this.$http.adornUrl('sys/log/getLogs'),
method: 'get'
})
.then(res => {
if (res && res.status === 200) {
const blob = res.data
var data = new Blob([blob], { type: 'text/plain;charset=UTF-8' })
var downloadUrl = window.URL.createObjectURL(data)
var anchor = document.createElement('a')
anchor.href = downloadUrl
// anchor.download = res.headers.title
anchor.download = 'typhoon.csv'
anchor.click()
}
})
.finally(() => {
this.downLoading = false
})
},