JavaScript数据简单校验设计

最新推荐文章于 2022-05-05 09:17:45 发布
最新推荐文章于 2022-05-05 09:17:45 发布
阅读量886 收藏 5
点赞数 2
分类专栏： 前端学习笔记 文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tian208/article/details/121731682
版权

**

JavaScript数据简单校验设计-HTML简单获取另一个HTML输入框的内容以及地区的选择获取

资源获取链接：
https://download.csdn.net/download/Tian208/56339522

**
一、目的
综合使用HTML、JavaScript和CSS进行注册页面设计，具体要求如下：
1)注意整个页面的色调和美观
2)使用Frameset+Table布局（div也可）
3)对用户ID和用户名、口令不符合条件及时判断
4)对口令不一致进行及时判断（34的及时判断，要求提示信息必须显示在同一个页面，也就是说显示在当前的行的后面或者上面或者下面）
5)判断Email地址是否合法
6)在“提交”后能在新页面显示所有的输入信息
程序效果：
在这里插入图片描述
在这里插入图片描述二、过程
源码模块：
在这里插入图片描述

1gerenxinxi.css

.ziti{ 
    font-family:黑体;
    font-size: 25px;
    width: 300;
    height: 30px;
    text-align: center;
    border: 3;
    background-color: #ffffff;
    line-height: 28px;

    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    }

.quanju{
    width: 300px;
    height: 600px;
    padding: 20px;

    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -280px;

}

.quanju1{
    text-align: center;

}


.text_field {
    width: 180px;
    height: 28px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
	background-color: #ffffff;
    
}

#all{
    width: 100%;
    height: 20px;
}
form p > * {
    display: inline-block;
    vertical-align:middle;
}

2denlu.js

.ziti{ 
    font-family:黑体;
    font-size: 25px;
    width: 300;
    height: 30px;
    text-align: center;
    border: 3;
    background-color: #ffffff;
    line-height: 28px;

    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    }

.quanju{
    width: 300px;
    height: 600px;
    padding: 20px;

    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -280px;

}

.quanju1{
    text-align: center;

}


.text_field {
    width: 180px;
    height: 28px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
	background-color: #ffffff;
    
}

#all{
    width: 100%;
    height: 20px;
}
form p > * {
    display: inline-block;
    vertical-align:middle;
}

Web-实验2-hjt08.html(首页HTML设计)

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>web-实验二</title> 

</head>
<body background="Picture\zuomian1.jpg" style=" 
background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
<style type="text/css">
.mytable{
width:100%;
height:100%;
margin:0 auto;
}

.left{
width:1180px;
height:550px;
margin:0 auto;
}

.right{
width:600px;
height:550px;
margin:0 auto;
}

</style>
<table class="mytable">
<tr>
<td colspan="3" style="background-color:#600000;font-size:15px;height:40px;text-align:center;color:aliceblue">
  <h1>用户注册</h1>
</td>
</tr>
<tr>
  <td colspan="3" style="font-size:7px;text-align:left" background="Picture\zuomian1.jpg">
  <h1>用户注册界面，请按要求操作</h1>
  </td>

  </tr>
  <tr>
   <td class="left">
    <iframe src="用户注册信息.html" name="iframe_a" class="mytable"></iframe>
   </td>
    <td style="background-color:#600000;font-size:25px;height:480px;width:50px;vertical-align:top"></td>
    
    <td class="right">
      <iframe src="shiping.html" name="iframe_b" class="mytable"></iframe>
</table>

</body>
</html>

用户注册信息.HTMl

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
<title>web-实验二</title> 
</head>
<script language="javascript" src="js/denlu.js" type="text/javascript"  charset="utf-8"></script>
<body background="Picture\zuomian1.jpg" style=" 
background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;" onload='getProvince()'>
<style type="text/css">
.mytable{
width:100%;
height:100%;
margin:0 auto;
font-weight: 200;
}

.mytable1{
font-weight:1000;
width:100%;
height:100%;
margin:0 auto;
text-align:center;
background-color:#ffffff;
}

.left{
width:1180px;
height:520px;
margin:0 auto;
}

.right{
width:600px;
height:520px;
margin:0 auto;
}

.hang{
    background-color:#600000;
    font-size:25px;
    width:50px;
    text-align:center;
}
.shuju{
    height:20px;
    font-size:20px;
}
</style>
<div>
<form  action="test.html" method="get">
<table class="mytable" border="3"cellpadding="6" cellspacing="6">
<tr>
<td colspan="1" style="background-color:#7B7B7B;font-size:10px;height:10px;text-align:center;color:aliceblue">
  <h1>注册界面</h1>
</td>
</tr>
<tr class="mytable1" > 
    <td valign="middle" >用 户 ID: <input type="text" placeholder="请输入你的用户ID:8-16位" pattern="\w{8,16}" id="userId"; name="userId" class="shuju"/></td>
    <span id="s_userId" class="error"></span>
    <tr class="mytable1" > 
    <td valign="middle">用 户 名: <input type="text" placeholder="请输入你的姓名" id="name" pattern="\w{0,16}" name="name" class="shuju"/></td>
    <span id="s_name" class="error"></span>
    <tr class="mytable1">


        <tr>
            <td valign="middle" class="mytable1" id="xingbie">性别：
                <input type="radio" name="xingbie" value="男">男
                <input type="radio" name="xingbie" value="女">女
        
            </td>
        </tr>

    <tr class="mytable1" > 
    <td valign="middle">密  码： <input type="text" placeholder="请输入你的密码:8-16位" pattern="\w{8,16}" class="shuju" id="password" name="password"></td>
    <span id="s_password" class="error"></span>
    <tr>
        <td valign="middle" class="mytable1" id="xueli">学历：
            <input type="radio" name="xueli" value="专科">专科
            <input type="radio" name="xueli" value="本科">本科
            <input type="radio" name="xueli" value="硕士">硕士
            <input type="radio" name="xueli" value="研究生">研究生
            <input type="radio" name="xueli" value="博士">博士
    
        </td>
    </tr>
    <tr class="mytable1" > 
        <td valign="middle">生    日:  <input type="date" placeholder="请输入你的生日：xxxx-xx-xx" id="birthday" name="birthday" class="shuju"/></td>


        <tr class="mytable1">
            <td valign="middle"><label for="email">E-mail:</label>
           
                <input type="email" name="email" id="email" placeholder="请输入邮箱"  class="shuju">
                <span id="s_email" class="error"></span>
            </td>

            
 <tr class="mytable1">
            <td>地区:</td>
    <tr class="mytable1"><td>
                <select id="province" onchange="chooseProvince(this)">
                    <option value="1">请选择省</option>
                </select>
                <select id="city" onchange="chooseCity(this)">
                    <option value="2">请选择市</option>
                </select>
                <select id="area">
                    <option value="3">请选择区</option>
                </select>
            </td>
            </tr>

    <tr class="mytable1" > 
         <td valign="middle">地   址:  <input type="text" placeholder="请输入你的地址" id="address" name="address" class="shuju"/></td>
 <tr class="mytable1" > 
     <td  valign="middle">手机号码:  <input type="text" placeholder="请输入你的手机号码：11位" pattern="\w{11}" id="Tel" name="Tel" class="shuju"/></td>
     <span id="s_Tel" class="error"></span>
     <tr class="mytable1">
        <td id="td_reset"><input type="reset" id="btn_reset" value="重置" >
            <input type="button" id="btn_sub1" value="确认信息" onclick="page()">
		<input type="submit" id="btn_sub" value="提交" onclick="page()">
       </td>

</table>
</form>
</div>
</body>
</html>

information.html(在“提交”后能在新页面显示所有的输入信息)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人资料</title>
		<link rel="stylesheet" href="css/gerenxinxi.css">
	</head>
	<script language="javascript" src="js/denlu.js" type="text/javascript"  charset="utf-8"></script>
	<body>
		<style type="text/css">
		
		</style>
<div id="all">

	<div class="quanju" align="center">
		<form>
		       
		            <p><label class="ziti">用户ID:</label><input type="text" id="userId" class="text_field"/></p>
		            <p><label class="ziti">用户名:</label><input type="text" id="name" class="text_field"/></p>
                    <p><label class="ziti">性别:    .</label><input type="text" id="xingbie" class="text_field"/></p>
					<p><label class="ziti">密码:    .</label><input type="text" id="password" class="text_field"/></p> 
					<p><label class="ziti">生日:    .</label><input type="text" id="birthday" class="text_field"/></p>
					<p><label class="ziti">学历:    .</label><input type="text" id="xueli" class="text_field"/></p>
		            <p><label class="ziti">地区:    .</label><input type="text" id="area1" class="text_field"/></p>
					<p><label class="ziti">E-mail:  </label><input type="text" id="email" class="text_field"/></p>
					<p><label class="ziti">地址:    .</label><input type="text" id="address" class="text_field"/></p>
		            <p><label class="ziti">手机号: </label><input type="text" id="Tel" class="text_field"/></p>
					<div class="quanju1">
					<a><input valign="middle" type="button" value="返回" onClick="onClick1()"></a><br>
				</div>
			</form>
			</div>
		</div>
		<table>
			<tr>
				<td>
					
				</td>
			</tr>
		</table>
		<script type="text/javascript">

			document.getElementById("userId").value  =window.localStorage.getItem("userId");
			document.getElementById("name").value    =window.localStorage.getItem("name");
			document.getElementById("password").value=window.localStorage.getItem("password");
			document.getElementById("birthday").value=window.localStorage.getItem("birthday");
			document.getElementById("xueli").value   =window.localStorage.getItem("xueli");
            document.getElementById("xingbie").value =window.localStorage.getItem("xingbie");
			document.getElementById("area1").value   =window.localStorage.getItem("area1");
			document.getElementById("email").value   =window.localStorage.getItem("email");
			document.getElementById("address").value =window.localStorage.getItem("address");
			document.getElementById("Tel").value     =window.localStorage.getItem("Tel");
			
	</script>
	</body>
</html>

提交成功页面设计test.html

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title></title>

    </head>
    <script language="javascript" src="js/denlu.js" type="text/javascript"  charset="utf-8"></script>
    <style> 
      body{text-align:center}      
      </style>
    <script type="text/javascript">
        function onClick(){
 
            window.location.href="用户注册信息.html";
        
    }
    
    </script>
<body>
	<form>
  <table>
	<tr>
		<br><br><br><br>
		<td valign="middle"><input type="button" id=in value="已提交" onclick="onClick()" 
		style="background-color:#7B7B7B;font-size:35px;width:400px;height:80px;text-align:center;color:aliceblue">
	  </td>
	  </tr>
	  <tr>
		  <td>
	  <input type="button" id=in value="返回" onclick="onClick()" 
	  style="background-color:#7B7B7B;font-size:35px;width:400px;height:80px;text-align:center;color:aliceblue">
	</td>
</table>
</form>

    
  
</body>

</html>

查看个人信息按钮设计shiping.html

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title></title>

    </head>
    <script language="javascript" src="js/denlu.js" type="text/javascript"  charset="utf-8"></script>
    <style> 
      body{text-align:center}      
      </style>
    <script type="text/javascript">
        function onClick(){
 
            window.location.href="用户注册信息.html";
        
    }
    
    </script>
<body>
	<form>
  <table>
	<tr>
		<br><br><br><br>
		<td valign="middle"><input type="button" id=in value="已提交" onclick="onClick()" 
		style="background-color:#7B7B7B;font-size:35px;width:400px;height:80px;text-align:center;color:aliceblue">
	  </td>
	  </tr>
	  <tr>
		  <td>
	  <input type="button" id=in value="返回" onclick="onClick()" 
	  style="background-color:#7B7B7B;font-size:35px;width:400px;height:80px;text-align:center;color:aliceblue">
	</td>
</table>
</form>

    
  
</body>

</html>

三、实验总结
此文章用来当做学习实验笔记，许多知识未知，不够好的地方可多多指教，如果需要，可以随便使用，谢谢大家！

锐行织梦者
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
密码框验证信息的案例
weixin_51415327的博客
09-01 317
默认 错误 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &lt...
html完成登录注册页面校验，并在新页面显示信息
weixin_622464的博客
11-14 5701
案例需求： 使用HTML、JavaScript和CSS进行注册页面设计，具体要求如下： 1)注意整个页面的色调和美观 2)使用Frameset+Table布局（div也可） 3)对用户ID和用户名、口令不符合条件及时判断 4)对口令不一致进行及时判断 对34的及时判断，要求提示信息必须显示在同一个页面 也就是说显示在当前的行的后面或者上面或者下面 5)判断Email地址是否合法 6)在“提交”后能在新页面显示所有的输入信息 注册页面： 新页面： 总结： 正则表达式的使用 通过css设计出好看的
深度解析javaScript常见数据类型检查校验
程序猿布欧的博客
05-05 856
前言 在JavaScript中，数据类型分为两大类，一种是基础数据类型，另一种则是复杂数据类型，又叫引用数据类型 基础数据类型：数字Number 字符串String 布尔Boolean Null Undefined Symbols BigInt 引用数据类型：日期Dete，对象Object，数组Array,方法Function, 正则regex,带键的集合：Maps, Sets, WeakMaps, WeakSets 基础数据类型和引用数据类型的区别，在之前深拷贝的文章中提到过，这里不做详细赘述。 传
采用一个自创的"验证框架"实现对数据实体的验证[扩展篇]
weixin_33911824的博客
10-15 63
关于“验证框架”，先后推出了《编程篇》、《设计篇》和《改进篇》，本不打算再写《XXX篇》的。但是今天收到两个园友的短消息，想了解一下如何定义自己的验证规则。这实际上涉及到对该“验证框架”的扩展，即如何自定义Validator和对应的ValidatorAttribute与ValidatorElementAttribute。为了让本系列看起来完整，通过《扩展篇》进行收尾。本篇我们写一个简单的Valid...
JS 表单验证 使用Frameset+Table布局（div也可）
11-09
1 注意整个页面的色调和美观 2 使用Frameset+Table布局（div也可） 3 对用户ID和用户名、口令不符合条件及时判断 4 对口令不一致进行及时判断 对34的及时判断，要求提示信息必须显示在同一个页面 也就是说显示在当前的行的后面或者上面或者下面 5 判断Email地址是否合法 6 在“提交”后能在新页面显示所有的输入信息
JavaScript校验设计.zip
12-05
Javascript简单校验设计及数据获取
js简单实现用户注册信息的校验代码
10-26
介绍了js简单实现用户注册信息的校验代码，有需要的朋友可以参考一下
ElementUI多个子组件表单的校验管理实现
10-16
总结起来，ElementUI 的表单校验在处理复杂表单时可能会遇到挑战，但通过合理的组件设计和事件通信，我们可以实现子组件间的协同校验，从而达到良好的效果。在实际应用中，还可以根据项目需求扩展此方案，比如添加...
编写可维护的JavaScript(中文)
09-21
Zakas是顶级的Web技术专家，也是《JavaScript高级程序设计》一书的作者。他曾是Yahoo！的首席前端开发工程师，在完成了从一名“独行侠”到“团队精英”的蜕变后，他站在前端工程师的角度提炼出众多的最佳编程实践，...
webapi-security:web API开放接口设计解决方案
07-24
使用场景：用来校验数据在传输过程中是否被修改 * SHA(Secure Hash Algorithm，安全散列算法)，单向加密； 使用场景：用来校验数据在传输过程中是否被修改 * HMAC(Hash Message Authentication Code，散列消息...
frameset与div布局的优缺点
10-26
对比传统的frameset布局和div布局的优缺点
javascript做的数据校验（校验IP地址等）
fishineye的专栏
04-20 821
New Page 1        //校验是否为英文  function checkchar()  {    var Letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"    for (i=0; i   {     var CheckChar = document.form.aaa.value.charAt(i);     CheckCh
js各类验证和数据处理
一条道走到黑
08-03 3397
/** * 验证密码复杂度（必须包含数字字母） * @param str * @returns true:满足规则，false:不满足 */ function validateStr(str){ var reg1 = /^(([0-9]{1,})([a-z]{1,}))|(([a-z]{1,})([0-9]{1,}))$/; var reg2 = /^(([0-9]{1,})([A-Z
javascript中的数字校验
weixin_weiweik的博客
07-07 1255
javascript限制输入的只能是数字，判断event.keyCode的值，并将它限定只能为数字，如果不是数字，则返回错误，如果是数字，则继续。 我先介绍验证javascript是否是数字另一种方式，通过下面的函数来实现： function isNumber(oNum) { if(!oNum) return false; var strP=/^/d+(/./d+)?$/; if(!strP.test(oNum)) return false; try{ if(parse...
js 表单验证
weixin_30381317的博客
02-28 82
$(document).ready(function(){ var ok1 = false; var ok2 = false; var ok3 = false; var ok4 = false; $('#title').focus(function(){ $(this).next().text('请输入姓名').removeClass('state1')...
【学习摘记】马士兵Servlet&JSP_课时6_htm页面提交数据并显示在新的页面上
醒见夜明的博客
09-07 247
①把htm页面放到test目录下 ②打开htm，注意action中代表点击“提交”按钮后，将要调用的url ③在web.xml中配置url对应servlet ④将.class文件放到相应文件夹，启动Tomcat，输入网址 ⑤修改htm文件，把get改成post 我只想说，这太尼玛不容易了，ThreeParam
puppeteer 实例：自动输入表单并提交搜索显示新的页面
wbj16116的博客
03-19 8367
const puppeteer = require(‘puppeteer’); (async () =&gt; { const browser = await puppeteer.launch({headless: false}); const page = await browser.newPage(); await page.goto(‘https://baidu.com‘...
前端简单入门第七讲 使用JavaScript完成表单简单的数据校验
李阿昀的博客
04-27 1812
网上闲逛时，如果我们对某个网站非常感兴趣，通常都会注册一个账户，网站都会对注册页面的数据进行复杂的校验。但这里我只是讲一下对注册页面的数据进行非空的简单校验！！！如果有某个值没有输入，点击注册按钮提交时，则弹出一个对话框进行提示！！！ 我从自己编写的注册页面中抽出核心代码如下：<form action="../index.html" method="post"> <table border
web前端期末大作业 html css javascript网页设计实例 企业网站制作
最新发布
06-28
在企业网站中，同学们需要运用JavaScript实现用户交互功能，如导航滑动、表单校验、数据加载等。此外，还需要掌握JavaScript的DOM操作、事件驱动、异步编程等知识点，以对网站的用户交互设计做出更细致的控制和调整...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

锐行织梦者

谢谢您的支持！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值