114 lines
3.6 KiB
JavaScript
114 lines
3.6 KiB
JavaScript
const ask_entry = document.querySelector('#consult-fixed');
|
|
const formMask = document.querySelector('#formMask');
|
|
const formModal = document.querySelector('#formModal');
|
|
const closeModalBtn = document.querySelector('#closeModalBtn');
|
|
const businessForm = document.querySelector('#businessForm');
|
|
const submit = document.querySelector('.submit_btn');
|
|
// const form_item = businessForm.querySelectorAll('.form-item');
|
|
var flag = 0;
|
|
const input = businessForm.querySelectorAll('input');
|
|
const ask_name = document.querySelector('#name');
|
|
|
|
// 显示
|
|
ask_entry.addEventListener('click', function(){
|
|
|
|
formMask.classList.add('show');
|
|
formModal.classList.add('show');
|
|
});
|
|
|
|
// 关闭
|
|
closeModalBtn.addEventListener('click', function() {
|
|
formMask.classList.remove('show');
|
|
formModal.classList.remove('show');
|
|
});
|
|
|
|
|
|
// 姓名验证
|
|
function judgeName(input){
|
|
return input.value.trim() !== '';
|
|
};
|
|
|
|
// 联系方式验证
|
|
function judgePhone(input){
|
|
const judge = /^1[3-9]\d{9}$/;
|
|
if(input.value.trim()!=='' && judge.test(input.value.trim())){
|
|
return true;
|
|
}else{
|
|
return false;
|
|
}
|
|
|
|
};
|
|
|
|
// 表单验证
|
|
input.forEach(input => {
|
|
let meg = null;
|
|
input.addEventListener('focus', function() {
|
|
|
|
if (meg!=null && meg.parentElement!=null) {
|
|
meg.parentElement.removeChild(meg);
|
|
}
|
|
meg = document.createElement('span');
|
|
meg.style.color = 'red';
|
|
|
|
if (input.id === 'name' && !judgeName(input)) {
|
|
meg.textContent = '请输入姓名';
|
|
input.parentElement.appendChild(meg);
|
|
}
|
|
else if (input.id === 'phone' && !judgePhone(input)) {
|
|
meg.textContent = '请输入正确手机号';
|
|
input.parentElement.appendChild(meg);
|
|
}
|
|
});
|
|
|
|
|
|
input.addEventListener('input', function() {
|
|
if (meg!=null && meg.parentElement!=null) {
|
|
if ((input.id === 'name' && judgeName(input)) || (input.id === 'phone' && judgePhone(input)===true)) {
|
|
meg.parentElement.removeChild(meg);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
submit.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
let success = true;
|
|
|
|
input.forEach(item => {
|
|
const oldTip = item.parentElement.querySelector('span');
|
|
if (oldTip && oldTip.parentElement) {
|
|
oldTip.parentElement.removeChild(oldTip);
|
|
}
|
|
});
|
|
// 对所有进行判断
|
|
input.forEach(input => {
|
|
|
|
if (input.id === 'name' && !judgeName(input)) {
|
|
submitTip = document.createElement('span');
|
|
console.log("我是submitTip:"+submitTip);
|
|
|
|
|
|
submitTip.style.color = 'red';
|
|
submitTip.textContent = '请输入姓名';
|
|
input.parentElement.appendChild(submitTip);
|
|
// flag = 1;
|
|
return;
|
|
} else if (input.id === 'phone' && !judgePhone(input)) {
|
|
submitTip = document.createElement('span');
|
|
submitTip.style.color = 'red';
|
|
submitTip.textContent = '请输入正确手机号';
|
|
input.parentElement.appendChild(submitTip);
|
|
// flag = 1;
|
|
return;
|
|
}
|
|
|
|
if (judgePhone(input) && judgeName(input)) {
|
|
alert("提交成功");
|
|
formMask.classList.remove('show');
|
|
formModal.classList.remove('show');
|
|
businessForm.reset();
|
|
}
|
|
});
|
|
|
|
|
|
}); |