<h2>客户留言</h2>
<div class="liuyan">
<form action="" id="form">
<ul>
<li><span>您的姓名:</span><input id="username" type="text" class="message_in" /></li>
<li><span>您的邮箱:</span><input id="email" type="text" class="message_in" /></li>
<li><span>您的电话:</span><input id="phone" type="text" class="message_in" /></li>
<li><span>留言主题:</span><input id="zhuti" type="text" class="message_in" /></li>
<li><span>留言内容:</span><textarea class="message_te" id="neirong"></textarea></li>
<li>
<input type="submit" value="提交" class="message_btn" />
<input value="重置" type="reset" class="message_btn" />
</li>
</ul>
</form>
</div>
/* 客户留言 */
.liuyan {
/* width: 700px; */
padding: 10px 0;
overflow: hidden;
text-align: left;
/* line-height: 24px; */
margin-left: 25px;
}
.liuyan ul li {
line-height: 24px;
margin-top: 16px;
list-style: none;
padding: 0;
border: 0;
}
.liuyan ul li span {
vertical-align: middle;
padding-right: 12px;
}
.liuyan ul li .message_in {
width: 300px;
height: 32px;
border: 1px solid #999999;
vertical-align: middle;
/* line-height: 32px; */
padding: 0 6px;
font-size: 16px;
}
.liuyan ul li .message_te {
width: 500px;
height: 90px;
border: 1px solid #999999;
vertical-align: middle;
line-height: 1.6;
padding: 0;
padding: 6px;
font-size: 16px;
}
.liuyan ul li .message_btn {
width: 92px;
height: 38px;
color: #FFFFFF;
cursor: pointer;
background: #355479;
font-size: 16px;
border-radius: 8px;
border: 0;
}
// 表单验证
var form = document.getElementById('form');
var username = document.getElementById('username');
var email = document.getElementById('email');
var phone = document.getElementById('phone');
var neirong = document.getElementById('neirong');
var zhuti = document.getElementById('zhuti');
form.addEventListener('submit', function(e) {
e.preventDefault();
checkInputs();
});
function checkInputs() {
var usernameValue = username.value.trim();
var emailValue = email.value.trim();
var phoneValue = phone.value.trim();
var neirongValue = neirong.value.trim();
if (usernameValue === '') {
alert("用户名不能为空");
return false;
}
if (emailValue === '') {
alert("邮箱不能为空")
return false;
} else if (!isEmail(emailValue)) {
alert("邮箱格式不正常")
return false;
}
if (phoneValue === '') {
alert("电话不能为空")
return false;
} else if (!isPhone(phoneValue)) {
alert("电话格式不正确")
return false;
}
if (neirongValue === '') {
alert("留言内容不能为空")
return false;
}
alert("留言成功!")
// 清空所有输入的内容
username.value = ''
email.value = ''
phone.value = ''
zhuti.value = ''
neirong.value = ''
}
// 邮箱格式验证
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\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,}))$/
.test(email);
}
// 电话格式验证
function isPhone(phone) {
return /^1[34578]\d{9}$/.test(phone);
}
标签:return,在线,留言,value,js,alert,var,height
From: https://www.cnblogs.com/hellocd/p/17013436.html