中国邮箱表单

已于 2022-10-22 12:31:01 修改
阅读量490 收藏
点赞数
分类专栏： HTML 文章标签： javascript 开发语言 ecmascript
于 2022-10-22 12:23:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62338582/article/details/127460061
版权
本文介绍了如何使用HTML、CSS和JavaScript实现一个前端表单验证，包括必填项验证、两次密码一致验证、邮箱正则表达式验证以及手机号码和身份证号码的长度验证。示例代码展示了具体的实现方式，帮助理解前端表单验证的实现过程。
摘要由CSDN通过智能技术生成

选择某些输入框(全部为text类型)进行JS验证，要求：

  1. 验证码不需要做

  2. 带星号输入框要求做非空验证

  3. 两次密码要相同

  4. 电子邮箱使用正则表达式验证

  5. 手机号码，身份证号码进行长度验证

  6. 手机号码进行正确性验证

  7.  

这个主要是运用table和js的正则表达式

看代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>中国邮箱</title>
		<link rel="stylesheet" type="text/css" href="15487.css"/>
		<script type="text/javascript" src="wwaa.js"></script>
	</head>
	<body>
		<form action="https://lenovo.ilive.cn/?f=stee" onsubmit="return Noempty()&&Sen()&&Emil()&&Tele()&&mimayz()">
			<!-- 只有return返回是真才执行action -->
		<table border="0px" class="table">
			<tr class="tr">
				<td colspan="4">
				<div class="sizastyle">	
				<div style="float: right;">
					<img src="img/155.png" height="66px" >
					
				</div>
				<div>
					<label  id="la">中国人发邮件用中国邮箱</label><br>
					<label  style="color: red;font-size: 30px;">china.com.cn</label>
				</div>
				</div>
				</td>
			</tr>
			<tr>
				<td colspan="4" align="center">
					<label >新用户申请（带<label  class="label1">*</label>的为必填）</label>
				</td>
				
			</tr>
			<tr>
				<td class="d"><label for="username" class="label3">用户名</label></td>
				<td><input type="text" class="inp" id="username"><label  class="label1">*</label></td>
				<td class="d"><label class="label3">真实姓名</label></td>
				<td><input type="text" class="inp" id="xingming"><label class="label1">*</label></td>
			</tr>
			<tr>
				<td align="right"><label  class="label3">密码</label></td>
				<td><input type="password" class="inp" id="password1"><label  class="label1">*</label></td>
				<td class="d"><label class="label3">性别</label></td>
				<td>
					<input type="radio" name="gender" value="men">男
					<input type="radio" name="gender" value="female">女
				</td>
			</tr>
			<tr>
				<td class="d"><label  class="label3">确认密码</label></td>
				<td><input type="password" id="password2"  class="inp" onblur="mimayz()"><label class="label1">*</label></td> 
				<!-- onblur事件发生在对像失去焦点，就是输入框没有光标 -->
				<td class="d"><label  class="label3">省/市</label></td>
				<td>
				<select name="12344" >
				<option value="11">北京</option>
				<option value="22">上海</option>
				<option value="33">广州</option>
				</select>
				</td>
			</tr>
			<tr>
				<td class="d"><label  class="label3">验证码</label></td>
				<td><input type="text" class="inp"><label class="label2">aply</label></td>
				<td class="d"><label  class="label3">地址</label></td>
				<td><input type="text" class="inp1"></td>
			</tr>
			<tr>
				<td class="d"><label  class="label3" >密码提示问题</label></td>
				<td><input type="text" class="inp" id="mimatisi"><label  class="label1">*</label></td>
				<td class="d"><label class="label3">邮政编码</label></td>
				<td><input type="text" class="inp1" id="you" ></td>
			</tr>
			<tr>
				<td class="d" ><label  class="label3">问题的答案</label></td>
				<td><input type="text" class="inp" id="mimatisidaan"><label  class="label1">*</label></td>
				<td class="d"><label  class="label3">生日</label></td>
				<td>
					<input type="text"  class="inp1" style="width: 20px;" id="daa"><label  class="label3">年</label>
					<select name="123" >
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
						<option value="9">9</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>
					</select><label class="label3">月</label>
					<select name="1234" >
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
						<option value="9">9</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>
					</select><label class="label3">日</label>
				</td>
			</tr>
			<tr>
				<td class="d"><label  class="label3">电子邮箱</label></td>
				<td><input type="text" class="inp" id="emil" onblur="Emil()"></td>
				<td class="d"><label class="label3">身份证号码</label></td>
				<td><input type="text" class="inp1" id="shenfenzheng" onblur="Sen()"></td>
			</tr>
			<tr>
				<td class="d"><label  class="label3">手机号码</label></td>
				<td><input type="text" class="inp" id="tele" onblur="Tele()"></td>
				<td class="d"><label  class="label3">联系电话</label></td>
				<td><input type="text" class="inp1" id="number" ></td>
			</tr>
			<tr>
				
				<td colspan="4" id="d">
					<input type="submit" class="box" style="width: 60px;" onclick="Noempty()">
					<input type="reset"  style="width: 60px;">
				</td>
				
			
			</tr>
			<tr>
				<td colspan="4"></td>
				
			</tr>
			<tr>
				<td colspan="4" margin="center" id="d"><label><img src="img/1101.png" width="50px">版权所有 中国互联网新闻中心</label></td>
				
			</tr>
		</table>
	</form>
	</body>
</html>

CSS文件：

.sizastyle{
	margin-top:0px;
text-align: right;
	border: 2px solid black;
	font-weight: 1000;
	font-family: 黑体;
}
.table{
	background:rgb(243, 248, 251);
	height: 573px;
	width: 658px;
	margin: auto;
	padding: 0px;
}
.tr{
	background-color: 255,255,255;
	height:100px;
}
#la{
	font-size: 30px;
	font-weight: 200;
}
.label1{
	font-family: 黑体;
	font-size:20px;
	margin-right:0px;
}
.d{
	text-align: right;
}
#d{
	text-align: center;
}
.inp{
	width: 80px;
	box-shadow: black -0.5px -0.5px 0.5px;	
}
.inp1{
	box-shadow: black -0.5px -0.5px 0.5px;	
}
.label1{
	color: red;
}
.label2{
		color: #ff557f;
}
.label3{
	font-family: 黑体;
	font-style: B;
}
.box{
	margin-right:40px;
}

JS文件：

//验证非空的函数
function Noempty(){
var a1=document.getElementById("username").value;
var a2=document.getElementById("xingming").value;
var a3=document.getElementById("password1").value;
var a4=document.getElementById("password2").value;
var a5=document.getElementById("mimatisi").value;
var a6=document.getElementById("mimatisidaan").value;
if(a1==""||a2==""||a3==""||a4==""||a4==""||a5==""||a6==""){
	alert("必填选不能为空！！！");
	return false;
}
}
//验证两次密码是否一样
function mimayz(){
	
	if(password1.value!=password2.value){
		alert("两次密码不一样！！！")
		return false;
	}
	
}
//电子邮箱验证
function Emil(){
	var e=document.getElementById("emil").value;
	var reg=new RegExp("^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$");
	var b=reg.test(e);
	if(!b){
		alert("邮箱格式不正确!!!");
		return false
	}
}
	//身份证验证
	function Sen(){
		var a=document.getElementById("shenfenzheng").value;
		var reg=new RegExp("\d{17}(\d|X|x)");
		var b=reg.test(a);
		if(!b){
			alert("身份证格式不正确!!!");
			return false;
		
	}
	}
	//手机号码验证
	function Tele(){
		var a=document.getElementById("tele").value;
		var reg=new RegExp("^(\d{3,4}-)\d{7,8}$");
		var b=reg.test(a);
		if(!b){
			alert("电话号码不正确!!!"); 
			return false;
	}
	}

效果图：

可以看看我这个table的结构

​​​​​​​

 

会用到的图片，可自己去效果图截图，我就是去题目截的图

 

 

人嫩
关注
专栏目录
Web前端学习（HTML）学习---下（表格标签，列表标签，表单标签）案例
fwdwqdwq的博客
07-31 277
趁年轻，余额不足可以挣。电量不足可以充，时间匆匆不再回来，趁年轻就去多付出，不攀比，不抱怨，不计较，多付出，因为有一种努力叫靠自己。前一篇文章我们着重学习了HTML中的，标题标签，段落标签，超链接，锚点链接，图片标签等，今天小编带大家一起来学习HTML下半部分的表格标签，列表标签，表单标签以及包含在其内部的知识的案例实现，希望小伙伴们认真学习天天进步！！！...
js 表单验证 （用邮箱注册）
weixin_43859703的博客
01-22 1794
&lt;form action="" method="get" id="form"&gt; &lt;ul class="form_ul"&gt; &lt;li class="text"&gt;&lt;input type="text" placeholder="邮箱" class=&quot
STL之sting的基本操作（2）
zhengyawen666的博客
11-02 863
string
【html】H2_列表、表格与媒体元素
m0_70083523的博客
11-09 230
列表 无序列表 有序列表 自定义列表： 列表对比 表格 表格的基本语法： 网页上播放视频和音频 HTML5页面布局 动态更换内容 iframe内联框架
html基础知识
m0_63324772的博客
04-21 683
HTML学习笔记 html初学笔记 html基础知识
html 解决 input type="password" 标签自动记住账号密码
qq_43028072的博客
10-25 1730
主要实现逻辑，把input type=“password” 改成 type=“text” 隐藏input密码，把真实密码存到input标签的一个属性中实现，下面的逻辑，每次input框中内容变化，获取真实密码逻辑如下 ps:复制一段字符串，选择一段●●或者直接把光标放到●●●●的中间粘贴都可以。 <!DOCTYPE html> <html lang="en"> <h...
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
10-18
在上述示例中，邮箱验证使用了正则表达式`\w+[@]{1}\w+[.]\w+`来匹配邮箱格式，而手机号验证则使用了正则表达式`/^1[34578]\d{9}$/`来确保手机号符合中国大陆的常见格式。需要注意的是，正则表达式应当根据实际需求...
js实现表单、邮箱、手机号码验证插件
08-25
本文将深入探讨如何使用JavaScript实现对表单、邮箱以及手机号码的有效验证。 首先，对于表单验证，JavaScript可以通过监听表单的提交事件来执行验证。我们可以为每个输入字段添加自定义的验证函数，检查输入值是否...
java正则表达式表单验证类工具类(验证邮箱、手机号码、qq号码等)
09-04
这个类包含了一系列静态方法，每个方法专门针对一种特定的数据格式，如邮箱、手机号码、固话号码、传真号码、QQ号码、身份证号码、邮政编码、URL、日期和IP地址。 1. **邮箱验证**：`checkEmail()`方法使用正则...
js 表单验证网页特效
11-10
3. **手机号码验证**：针对不同国家的电话号码格式，可以设置不同的正则表达式，如中国的手机号码验证`/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[0|1|3|5|6|7|8]|18[0-9]|19[8|9])\d{8}$/`。 4. **数字验证**：...
Vue--Table的Column格式化方案
m0_69435612的博客
10-04 234
原日期格式：2024-09-07T08:32:41.000+00:00。格式化成YYYY-MM-DD。让数字显示小数点后几位。
解释器、预处理、main函数
编程语言技巧经验分享
10-07 1214
解释器覆盖范围很广，不管是解释语言的运行时解释翻译器，还是操作系统自带脚本的解释器。
vue-live2d看板娘集成方案设计使用教程
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1356
vue-live2d看板娘集成方案设计使用教程
javascript中==和===有什么不同
最新发布
qq_48763502的博客
10-09 255
这个运算符用于比较两个值是否相等，但会在必要时进行类型转换。当两个值的类型不同，JavaScript 会尝试将它们转换为相同的类型，然后再进行比较。
VUE2常见问题以及解决方案汇总（不断更新中）
tangdou369098655的博客
10-06 415
解决vue项目中 el-table 的 @row-click 事件与行内点击事件冲突，点击事件不生效（表格行点击事件和行内元素点击事件冲突）需要阻止事件冒泡，vue子组件传递数据给父组件，vue + elementui 使用dialog弹出框作为子组件，首次点击弹框可以显示，第二次点击弹框后赋值无法打开弹框，动态循环生成el-checkbox后数据更新但是页面不更新，无法取消勾选，点击无效问题
深入解析 JavaScript 中的普通函数与箭头函数：区别、适用场景与最佳实践
qq_22841387的博客
10-02 1179
在函数式编程的支持上，箭头函数作为 ES6 新引入的一种更为简洁的函数形式，极大地方便了开发者编写简洁高效的代码。然而，箭头函数的行为与传统的普通函数有所不同，尤其是在 this。普通函数在定义时，尤其是带有单行返回值的情况下，显得略微冗长。无论是全局调用、作为对象方法调用，还是在事件处理函数中调用，动态变化的场景，比如回调函数，尤其是在类方法中作为回调传递时，箭头函数避免了手动绑定。在回调函数、数组操作等场景中，箭头函数的简洁性尤为明显。在定义对象的方法时，箭头函数由于不绑定自己的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值