首页 > 其他分享 >1、在线留言+js验证

1、在线留言+js验证

时间:2022-12-29 20:24:27浏览次数:35  
标签:return 在线 留言 value js alert var height

<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

相关文章

  • JS表单效验
    什么需要表单验证?1.减轻服务器的压力2.保证数据的完整性、有效性表单效验的步骤:1.获取表单元素输入的值2.对表单数据进行判断处理3.使用事件对数据进行提交表单选......
  • Js利用正则表达式去除字符串的中括号
    原文链接:点我  //功能:1)去除字符串前后所有空格   //     2)去除字符串中所有空格(包括中间空格,需要设置第2个参数为:g)   functionTrim(str,is_g......
  • js 复制图片
    //点击复制二维码functioncopyPic(url){varcanvas=document.createElement('canvas')//创建一个画板constimage=newImage()i......
  • Js插件 之jqzoom放大镜
    链接:https://pan.baidu.com/s/1yI8KL7QjrT9zqOLlk_SsTA提取码:sjm8一、效果图 二、示例<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"http://w......
  • vue项目调用exe文件(JS方式)
    方式一:项目中引入下面JS(function(f){if(typeofexports==="object"&&typeofmodule!=="undefined"){module.exports=f();}elseif(t......
  • vue-pdf在线预览pdf文件
    1.安装vue-pdfnpminstall--savevue-pdf2.页面js注册组件importpdffrom'vue-pdf'components:{pdf}3.页面使用组件<pdfsrc=""></pdf>......
  • js里的类 class
    以前不知道为啥,总觉得这个类很高深莫测,然后自己在开发业务中也没有需要使用它的地方。所以就一直没去了解,今天有时间看了一下文档,在这稍微记录一下自己的总结。类的关键字......
  • js倒计时功能
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><metaht......
  • main.js和 router文件夹里面的index.js引入的vue一定要一样
     当 main.js和router文件夹里面的index.js引入的vue不一样      错误:找不到<router-view>标签解决办法:将main.js和index.js的vue引入成为一样的......
  • 好用免费的在线PDF转换工具推荐
    首先,先上网址​​ClickOnce​​​,这个是目前能找到的里面,操作最直观的工具类网站了界面相对来说,比较的优雅,好用是他最大的特点。转换工具方面,支持多种转换,总体给我的感......