目录
一.去除空格
function isnull(val) {
const str = val.replace(/(^\s*)|(\s*$)/g, '');
if (str == '' || str == undefined || str == null) {
return true;
} else {
return false;
}
}
二.判断图片类型
function ispicture(file){
let type=file.type;
if(type==='image/git'||type==='image/jpeg'||type==='image/jpg'||type==='image/png'||type==='image/webp'){
return true;
}else{
return false;
}
}
三.正则表达式
let emailreg=/^([a-z0-9A-Z]+[-|\.]?)+[a-z0-9A-Z]@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\.)+[a-zA-Z]{2,}$/;
let psreg=/^(?=.*\d)(?=.*[A-z])[\da-zA-Z]{6,12}$/;
let agereg=/^(([0-9]|[1-9][1-9]|1[0-1][0-9])(\\.[0-9]+)?|119)$/;
let hightreg=/^([1-9][0-9]{0,3}(\.\d{1,3})?|5)$/;
四.封装confirm
js
function confirm(msg){
let Confirmcnt = document.createElement('div');
Confirmcnt.innerHTML = `
<div class="mask-color"></div>
<div id='mask'>
<div id="mask-top"><span>提示</span></div>
<div id="mask-main">${msg}</div>
<button style="background-color: #f0f9eb; color: #67c23a;">确认</button><button style="background-color: #fff; border: #d7d9d6 1px solid;">取消</button>
</div>
`;
document.body.appendChild(Confirmcnt);
let conPromise= new Promise((resolve,reject) => {
let button=Confirmcnt.getElementsByTagName('button');
button[0].addEventListener('click', function () {
document.body.removeChild(Confirmcnt);
resolve()
})
button[1].addEventListener('click', function () {
document.body.removeChild(Confirmcnt);
reject()
})
})
return conPromise;
}
css
#mask {
position: fixed;
background-color: #fff;
width: 300px;
height: 150px;
top: 50%;
left: 52%;
display: block;
margin-left: -200px;
margin-top: -125px;
border-radius: 4px;
z-index: 9999;
}
.mask-color{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
opacity: 0.6;
background-color: #dbd9d9;
z-index: 998;
}
#mask button {
width: 50px;
margin-left: 65px;
height: 30px;
margin-top: 5.5px;
border: none;
color: #000;
border-radius: 3px;
}
#mask-top {
border-radius: 4px 4px 0 0;
height: 30px;
font-size: 15px;
line-height: 30px;
padding-left: 20px;
background-color: #f0f9eb;
color: #67c23a;
}
#mask-main {
height: 80px;
text-align: center;
line-height: 80px;
font-size: 15px;
border-bottom: 1px solid #ebeef5;
}
使用方法:
function delcourse(event) {
let id = event.parentNode.parentNode.id;
confirm("真的要删除吗?")
.then(() => {
axios.delete(`${head}class/delclass?id=${id}`, {
headers: {
'token': token
}
})
.then(r => {
content.innerHTML = ``;
getclasspage();
})
})
.catch(()=>{
console.log("取消删除");
})
}
五.封装alert
js
function alertSuccess(msg){
let alertBox= document.createElement('div');
alertBox.className='alert alert-success';
alertBox.innerHTML=`<svg t="1690011096577" class="alert-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2337" width="200" height="200"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m-114.176-310.954667a53.333333 53.333333 0 0 0 75.434667 0l323.328-323.328a53.333333 53.333333 0 1 0-75.434667-75.434666l-287.914667 283.306666-128.853333-128.853333a53.333333 53.333333 0 1 0-75.434667 75.434667l168.874667 168.874666z" fill="#67c23a" p-id="2338"></path></svg>
<p>${msg}</p>`;
document.body.appendChild(alertBox);
setTimeout(() => {
document.getElementsByClassName('alert')[0].style.opacity=0;
setTimeout(()=>{
document.body.removeChild(alertBox);
},2000)
}, 1000);
}
function alerterror(msg){
let alertBox= document.createElement('div');
alertBox.className='alert alert-error';
alertBox.innerHTML=`
<svg t="1690015321493" class="alert-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2306" width="200" height="200"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m238.4 641.6l-45.6 45.6L512 557.6 318.4 750.4l-45.6-45.6L467.2 512 273.6 318.4l45.6-45.6L512 467.2l193.6-193.6 45.6 45.6L557.6 512l192.8 193.6z" p-id="2307" fill="#f56c6c"></path></svg>
<p>${msg}</p>`;
document.body.appendChild(alertBox);
setTimeout(() => {
document.getElementsByClassName('alert')[0].style.opacity=0;
setTimeout(()=>{
document.body.removeChild(alertBox);
},2000)
}, 1000);
}
css
.alert-error {
background-color: #fef0f0;
border-color: #fde2e2;
}
.alert-error p {
color: #f56c6c;
}
.alert-success {
background-color: #f0f9eb;
border-color: #e1f3d8;
}
.alert-success p {
color: #67c23a;
}
.alert {
display: flex;
min-width: 380px;
position: absolute;
border-radius: 4px;
padding: 15px 15px 15px 20px;
border: 1px solid #ebeef5;
left: 40%;
top:30px;
opacity: 1;
transition:opacity 2s;
z-index: 9999;
}
.alert p {
line-height: 1;
font-size: 14px;
}
.alert .alert-icon {
width: 14px;
height: 14px;
margin-right: 10px;
}