1、在线留言+js验证

<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);
}