中国网邮箱（选择某些输入框(全部为text类型)进行JS验证，要求：验证码不需要做带星号输入框要求做非空验证两次密码要相同电子邮箱使用正则表达式验证手机号码，身份证号码进行长度验证）

最新推荐文章于 2022-01-14 11:12:43 发布
最新推荐文章于 2022-01-14 11:12:43 发布
阅读量4.4k 收藏 8
点赞数 6
文章标签： html5 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56715530/article/details/120931810
版权

运行结果：（关于正则表达式的验证是包含的，这里就不作验证了）

 

孩子学艺不精，许多代码可以省略，所以写的有点冗余，但磕磕碰碰也算完成了，下面直接上代码：

html文件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>中国网邮箱</title>
		<link href="../css/中国邮箱表单.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="../js/中国邮箱表单.js" ></script>
	</head>
	<body>
		<form>
		<div class="div1">
				<h2>中国人发邮件用中国网邮箱</h2>
				<p class="p3">china.com.cn</p>
		</div>
		<div>
			<p class="p4">新用户申请（带<span>*</span>的为必填选项）</p>
			<table>
				<tr>
					<td class="table1">
						<label for="userName" >用户名</label>
					</td>
					<td>
						<input type="text" id="userName" class="input2" /><p class="p1">*</p>
					</td>
					<td class="table2">
						<label for="trueName">真实姓名</label>
					</td>
					<td>
						<input type="text" id="trueName" class="input2" /><p class="p1">&nbsp;*</p>
					</td>
				</tr>
				<tr>
					<td class="table1">
						<label for="password">密码</label>
					</td>
					<td>
						<input type="password" id="password" class="input2" /><p class="p1">&nbsp;*</p>
					</td>
					<td class="table1">
						<label>性别</label>
					</td>
					<td>
						<input type="radio" name="sex" value="女" class="input1" /><p class="p2">女</p>
						<input type="radio" name="sex" value="男" class="input1" /><p class="p2">男</p>
					</td>
				</tr>
				<tr>
					<td class="table1">
						<label for="assureThePassword">确认密码</label>
					</td>
					<td>
						<input type="password" id="assureThePassword" class="input2" onblur="equal()" /><p class="p1">&nbsp;*</p>
					</td>
					<td class="table1">
						<label>省/市</label>
					</td>
					<td>
						<select>
							<option value="BeiJing" selected="selected">北京</option>
							<option value="ShangHai">上海</option>
							<option value="TianJing">天津</option>
							<option value="HangZhou">杭州</option>
							<option value="others">其他</option>
						</select>
					</td>
				</tr>
				<tr>
					<td class="table1">
						<label for="verificationCode">验证码</label>
					</td>
					<td>
						<input type="text" id="verificationCode" class="input2" />
					</td>
					<td class="table1">
						<label for="address">地 址</label>
					</td>
					<td>
						<input type="text" id="address" class="input3" />
					</td>
				</tr>
				<tr>
					<td class="table1">
						<label for="isMatched">密码提示问题</label>
					</td>
					<td>
						<input type="text" id="isMatched" class="input2" /><p class="p1">&nbsp;*</p>
					</td>
					<td class="table1">
						<label for="postalCode">邮政编码</label>
					</td>
					<td>
						<input type="text" id="postalCode" class="input3" />
					</td>
				</tr>
				<tr>
					<td class="table1">
						<label for="answer">问题的答案</label>
					</td>
					<td>
						<input type="text" id="answer" class="input2" /><p class="p1">&nbsp;*</p>
					</td>
					<td class="table1">
						<label for="birthday">生 日</label>
					</td>
					<td>
						<input type="text" id="birthday" class="input4" /><p class="p2">年</p>
						<select class="select1">
							<option value="1" selected="selected">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>
						<p class="p2">月</p>
						<select class="select1">
							<option value="1" selected="selected">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="others">其他</option>
						</select>
						<p class="p2">日</p>
					</td>
				</tr>
				<tr>
					<td class="table1">
						<label for="e-mail">电子邮箱</label>
					</td>
					<td>
						<input type="text" id="e-mail" class="input2" onblur="e_mailError()" />
					</td>
					<td class="table1">
						<label for="identification">身份证号码</label>
					</td>
					<td>
						<input type="text" id="identification" class="input3" onblur="identificationTest()" />
					</td>
				</tr>
				<tr>
					<td class="table1">
						<label for="telephoneNumber">手机号码</label>
					</td>
					<td>
						<input type="text" id="telephoneNumber" class="input2" onblur="telephoneNumberError()" />
					</td>
					<td class="table1">
						<label for="contactNumber">联系电话</label>
					</td>
					<td>
						<input type="text" id="contactNumber" class="input3" />
					</td>
				</tr>
			</table>
		</div>
		<div>
			<button type="submit" id="btu1" class="button1" onclick="emptyError()" onmouseenter="inButton1()" onmouseleave="outButton1()" >提交</button>
			<button type="reset" id="btu2" class="button2" onmouseenter="inButton2()" onmouseleave="outButton2()" >重置</button>
			<p class="p5">版权所有 中国互联网新闻中心</p>
		</div>	
		</form>
	</body>
</html>

css文件：

h2{
	height: 7px;
	margin-left: 35px;
}
.div1{
	border:1.5px solid #000000;
	background-image: url(../img/翅膀.jpg);
	background-size: 50% 100%;
	background-repeat:no-repeat;
	background-position: right;
}
.p1{
	display: inline; 
	color: rgb(187,22,33);
	font-weight: bold;
}
.p2{
	display: inline;
}
.p3{
	color: rgb(198,39,87); 
	font-weight: bold;
	height: 5px;
	margin-left: 190px;
	font-size: 20px;
}
.p4{
	margin-bottom: 7px;
	text-align: center;
	height: 5px;
	font-size: small;
}
.p5{
    margin-left: 260px;
	font-size: smaller;
}
span{
	color: rgb(198,39,87);
	font-weight: 500;
	font-weight: bold;
}
td{
	line-height: 40px;
}
.table1{
	text-align: right;
}
.table2{
	text-align: right;
	padding-left: 60px;
}
form{
	background-color: rgb(243,248,251);
	margin-left: 450px;
	margin-right: 450px;
	background-image: url(../img/中国.jpg),
	                  url(../img/aply.jpg);
	background-repeat: no-repeat, no-repeat; 
	background-position: bottom left, center center;
	background-size: 45% 7%,15% 7%;
}
label{
	padding-right: 16px;
}
input{
	box-shadow:.8px .8px 0px #000000 inset;
	border-color: lightgray;
	height: 20px;
}
.input1{
	box-shadow: 0px 0px 0px #000000;
}
.input2{
	width: 105px;
}
.input3{
	width: 170px;
}
.input4{
	width: 25px;
}
.select1{
	width: 40px;
	height: 22px;
}
.button1{
	margin-left: 225px;
	padding-left: 15px;
	padding-right: 15px;
	border-radius:5px;
	border:.2px solid #000000;
}
.button2{
	margin-left:45px;
	padding-left: 15px;
	padding-right: 15px;
    border-radius:5px;
	border:.2px solid #000000;
}

js文件：

//对必填项的判空操作
function emptyError(){
	var empty=/^$/;//定义一个为空的正则表达式的形式
	var pass1=document.getElementById("userName").value;
	var pass2=document.getElementById("trueName").value;
	var pass3=document.getElementById("password").value;
	var pass4=document.getElementById("assureThePassword").value;
	var pass5=document.getElementById("isMatched").value;
	var pass6=document.getElementById("answer").value;
    //只要必填项有一个符合空的操作，则为错误
	if(empty.test(pass1)||empty.test(pass2)||empty.test(pass3)||empty.test(pass4)||empty.test(pass5)||empty.test(pass6)){
		alert("必填项不能为空！");
	}
}
//身份证正则表达式
function identificationTest (){
	var pass=document.getElementById("identification").value;//获取身份证输入框的值
	var reg=/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;//17位的数字或者X的验证规则，没有讨论号码的真实性
	if(!reg.test(pass)){
		alert("error！请检查身份证格式");
	}
}
//电子邮箱的正则表达式
function e_mailError(){
	var pass=document.getElementById("e-mail").value;
	var reg=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
	if(!reg.test(pass)){
		alert("error！请检查邮箱的格式");
	}
}
//手机号码的正则表达式
function telephoneNumberError(){
	var pass=document.getElementById("telephoneNumber").value;
	var reg=/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
	if(!reg.test(pass)){
		alert("error！请检查手机号码的格式");
	}
}
//密码是否相同的比较
function equal(){
	if(password.value!=assureThePassword.value){
		alert("error！两次密码必须相同");
		assureThePassword.value="";
	}	
}
//下面是设置按钮变色
function inButton1(){
	document.getElementById("btu1").style.background="lightgrey";
}
function outButton1(){
	document.getElementById("btu1").style.background="rgb(239,239,239)";
}
function inButton2(){
	document.getElementById("btu2").style.background="lightgrey";
}
function outButton2(){
	document.getElementById("btu2").style.background="rgb(239,239,239)";
}

下面是所用到的图片：

 

些许草率罢了
关注
  • 6
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
破解自己邮箱和密码
12-24
破解专用的 自己的网络忘记了破解专用的
js的输入框验证
别在熬夜了！
04-16 760
JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入) 2.只能输入数字,能输小数点. 3.数字和小数点方法二 <input type=text t_value="" o_value="" onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_valu
实现一个密码验证输入框
quanjin24k的专栏
08-29 1052
有段时间没有写代码了，布局都不太会写了，好一会儿才写出个xiangy
js惯用的输入验证
猪头肉的专栏
03-19 521
js惯用的输入验证 By wkhua2008   at 2014-06-15   22 阅读   0 回复   0.0 希赛币 js常用的输入验证 　　用户名：/^[a-z0-9_-]{3,16}$/ 　　密码：/^[a-z0-9_-]{6,18}$/ 　　十六进制值：/^# ([a-f0-9]{6}|[a-f0-9]{3})$/ 　　电子邮箱：/^([a-z0-9_\.-
js实现手机号码和身份证号码校验
diantingpi1639的博客
02-22 246
<script type="text/javascript"> function checkform() { var re; var ss = document.getElementById('txtMobile').value; re = /^(1...
JS（javascript）入门：密码输入框中所输入的不规范内容如何在一旁提示出来并要求重新输入？
01-20
在JavaScript（通常简称为JS）中，为密码输入框实现输入规范检查并提供实时提示是一项基本功能，这对于增强用户体验和确保数据准确性至关重要。本篇将详细介绍如何通过JavaScript和CSS实现这个功能。 首先，我们...
Flutter 完美的验证码输入框实现
01-03
老孟导读：刚开始看到这个功能的时候一定觉得so easy，开始的时候我也是这么觉得的，这还不简单，然而真正写的时候才发现并没有想象的那么简单。 先上图，不上图你们都不想看，我难啊，到Github：...
带动画效果的CSS3 H5表单输入框验证代码.zip
07-11
 使用 ：CSS3中的验证选择器    <input type="text" class="exp__input" id="example" name="test" placeholder="Full Name" required>  " data-icon-ok="">Full Name      <input type=...
vue实现短信验证码输入框
10-15
主要为大家详细介绍了vue实现短信验证码输入框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS 身份证号码 正则 验证
zwnboy的博客
06-24 167
function isIdCardNo(num) {                num = num.toUpperCase();           //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X。            if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(num))) {   ...
jquery验证身份证号码、手机号码
weixin_30247781的博客
11-15 153
// 验证身份证 function IsUserCard(idNo) { if (idNo.length != 0) { if (!checkCard(idNo)) { // $("#errorTips").html("身份证号码格式错误"); return false; } else { r...
邮箱密码忘了怎么找回？电子邮箱密码怎么改和填写？
qimashang的博客
01-14 2732
Tom企业邮箱的密码可以通过管理员来修改，只需要登录管理员后台就能直接修改子账号密码，如果是管理员忘记密码，也可以通过邮箱官方客服来帮忙重置，在修改邮箱密码时，要注意密码格式。
验证码输入框实例html+css
qq_32447287的博客
10-25 8052
html部分： &amp;lt;label class=&quot;code_container&quot;&amp;gt; &amp;lt;span class=&quot;code_label&quot;&amp;gt;验证码&amp;lt;/span&amp;gt; &amp;lt;input type=&quot;text&quot; class=&quot;input_code
input框的一系列操作(输入框必填*号,验证单选框为必选,默认选中单选按钮,点击禁用表单输入域,输入框变为只读)
热门推荐
qq_43437571的博客
07-16 2万+
例① ：输入框必填，用*号提示 <p class="form-group"> <label for="author">姓名</label> <span class="required" style="color:red">*</span> <br> <input type="text" id="a...
input输入框模拟验证码输入效果
donggua_123的博客
04-16 1万+
今天看到一个帖子，说到用input输入框模拟滴滴、摩拜等app验证码输入效果，提到了一个方案：1、利用input来获得焦点，自动调用手机的数字键盘2、实际将输入框用透明度隐藏3、用label的for属性与input联动来显示输入的数字于是照着这个思路实际操作了一番，还是发现了不少问题。首先页面布局：&lt;div class="container"&gt; &lt;h2&gt;输入验证码：...
easyui 通过js给input框增加必填验证
tyjlearning的博客
12-08 1万+
$('#vv').validatebox({required:true});是必须输入 false 不是必须输入 input框添加 class="easyui-validatebox" 属性
用户在点击注册按钮时，学号输入框、密码输入框、以及确认密码输入框都需要做非空验证，如果为空则提示对应的输入内容不能为空。
最新发布
04-06
2. 判断这三个输入框是否为空，如果为空则提示对应的输入内容不能为空。 3. 如果三个输入框都不为空，则进行后续的注册操作。 以下是示例代码： ``` // 获取输入框的值 var studentId = document.getElementById...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值