form表单练习

最新推荐文章于 2022-07-21 23:17:15 发布
最新推荐文章于 2022-07-21 23:17:15 发布
阅读量296 收藏 1
点赞数
分类专栏： javascript+html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43597212/article/details/116071446
版权 
// 练习,一个form,用于注册,其中有用户名,密码,密码确认,要求:
			//     检验用户名,不能包括以下字符: 分号,逗号,$符号,/符合,\符号,位数应该至少8位,但是不得超过18位
			//     检验密码, 密码至少6位，密码中至少要包含一个数字,一个字母和一个符号(!@#$%^&*()_=+`~)
			//     密码确认必须和密码一致.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post"  align= "center" id="form1">
			<label for="jujiao">用户名称：</label><input type="text" name="jujiao" id="jujiao" value=""/>
			<span id="sp">尚未发现异常</span>
			<br>
			<label for="jujiao2">输入密码：</label><input type="text" name="" id="jujiao2" value=""/>
			<span id="sp1">尚未发现异常</span>
			<br>
			<label for="jujiao3">密码确认：</label><input type="text" name="" id="jujiao3" value="" />
			<span id="sp2">尚未发现异常</span>
			<br>
			<input type="submit" value="提交"/>
		</form>
		<script type="text/javascript">
			var j =  document.querySelector('#form1>#jujiao');
			var sp = document.querySelector('#form1>#sp');
			
			var j2 = document.querySelector('#form1>#jujiao2');
			var sp1 = document.querySelector('#form1>#sp1');
			
			var j3 = document.querySelector('#form1>#jujiao3');
			var sp2 = document.querySelector('#form1>#sp2');
			// var
			j.value = '请输入你要输入的内容';
			
			j2.value = '请输入你要输入的密码';
			
			j3.value = '请再次输入密码';
			j.onblur = function(){
				
				if(j.value === ';' ){
					// sp.innerText = '您输入的内容有错误';
					sp.innerHTML = '<span>您输入的用户名不能有&apos; ; &apos;</span>';
					sp.style.color = 'red';
				}
				if(j.value === ','){
					sp.innerHTML = '<span>您输入的用户名不能有&apos; , &apos;</span>';
					sp.style.color = 'red';
				}
				if(j.value === '$'){
					sp.innerHTML = '<span>您输入的用户名不能有&apos; $ &apos;</span>';
					sp.style.color = 'red';
				}
				if(j.value === '/'){
					sp.innerHTML = '<span>您输入的用户名不能有&apos; / &apos;</span>';
					sp.style.color = 'red';
				}
				if(j.value === '\\'){
					sp.innerHTML = '<span>您输入的用户名不能有&apos; \\ &apos;</span>';  
					//Javascript中反斜杠输入两次代表一个反斜杠
					sp.style.color = 'red';
				}
				if(j.value.length <= 8){
					// sp.innerHTML = '<span>您输入的用户名不能有&apos; $ &apos;</span>';
					sp.innerHTML = '<span>您输入的用户名称至少得8位哦!<span>';
					sp.style.color = 'red';
				}
				if(j.value.length > 18){
					// sp.innerHTML = '<span>您输入的用户名不能有&apos; $ &apos;</span>';
					sp.innerHTML = '您输入的用户名称不得超过18位哦!';
					sp.style.color = 'red';
				}
			}
			j.onfocus = function(){
					sp.innerHTML = '';
					
			}
			
			j2.onblur = function(){
				if(j2.value.length <= 6){
					sp1.innerHTML = '<span>您输入的密码不能小于6位哦</span>';
					sp1.style.color = 'red';
				}
				// if(j2.value.indexOf('!,@,#,$,%,^,&,*,(,),_,=,+,`,~,)') === false ){
				// 	//sp1.innerText = '您输入的符号必需有以下符号之一：!,@,#,$,%,^,&,*,(,),_,=,+,`,~,)';
				// 	sp1.innerHTML = '您输入的符号必需有以下符号之一：!,@,#,$,%,^,&,*,(,),_,=,+,`,~,)';
				// 	sp1.style.color = 'red';
				// }
				
				// if(j2.value.indexOf())
				for(var i= 0; i < j2.value.length ; i++){
					// var s = (j2.value[i] =='！' || j2.value[i] =='#' || j2.value[i] == '@' || j2.value[i] == '$'
					// || j2.value[i] == '%' || j2.value[i] == '^' || j2.value[i] =='*' || j2.value[i] == '('
					// || j2.value[i] == ')' || j2.value[i] == '_' || j2.value[i] == '=' || j2.value[i] == '+'
					// || j2.value[i] == '~'  || j2.value[i] == '`');
					
					
					// if(j2.value[i] =='！' || j2.value[i] =='#' || j2.value[i] == '@' || j2.value[i] == '$'
					// || j2.value[i] == '%' || j2.value[i] == '^' || j2.value[i] =='*' || j2.value[i] == '('
					// || j2.value[i] == ')' || j2.value[i] == '_' || j2.value[i] == '=' || j2.value[i] == '+'
					// || j2.value[i] == '~'  || j2.value[i] == '`'
					// ){
					// 	sp1.innerHTML = '<span>您输入的密码正确</span>';
					// }else{
					// 	sp1.innerHTML = '<span>您输入的密码至少得有一位特殊字符</span>';
					// }
					
					//  if(!isNaN(j2.value[i])  ){
					// 	 sp1.innerHTML = '<span>您输入的密码正确</span>';
					//  }else{
					// 	  sp1.innerHTML = '<span>您输入的密码至少有一位数字</span>';
					//  }
					 // var s = 
					 if(
					 // j2.value.match(".*[a-z]+.*") && (!isNaN(j2.value[i]) )&& s
					 j2.value.match("^(?:(?=.*[0-9].*)(?=.*[A-Za-z].*)(?=.*[\\W].*))[\\W0-9A-Za-z]{8,16}$")
					 ) {
						 sp1.innerHTML = '<span>您输入的密码正确</span>';
					 }else{
						  sp1.innerHTML = '<span>您输入的密码至少有一位是字母，数字 特殊字符</span>';
					 }
					// console.log(
					
				}
			}
			j2.onfocus = function(){
				sp1.innerHTML = '';
			}
			j3.onblur = function(){
				if(j2.value == j3.value){
					sp2.innerText = '确认密码正确';
				}else{
					sp2.innerText = '您输入的密码有误';
				}
				
			}
			
			// var a = 1;
			// console.log(typeof(a));
		</script>
	</body>
</html>

在这里插入图片描述
如果需要htm的样式需要自己修改以及提示

九情
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
表单 Form实例练习
m0_46636679的博客
05-13 351
<form> <!-- text文本 就是输入你想输入的文字 --> 用户名： <input type="text" name="username" id="username" placeholder="请输入用户名"> <br> <!-- 密码框 用户输入的密码前端看不见 --> 密码: <input type="password" name...
关于表单（form）设计的学习
Jener
12-05 755
背景     一直以来，我发觉自己非常缺乏设计天分，不说网页色彩搭配，我发觉自己连设计一个简单的、整洁的表单都十分吃力。幸运的是，我在学校图书馆发现了《Web表单设计：创建高可用性的网页表单》这本书，因此就如获至宝认真看起，断断续续的把整本书都浏览了下。对了，确切地说，这是本设计思想指导的书，不谈技术。      书本中最让我长知识的是，书本提出了关于构建表单的三层理论：关系、对话和外观。
form.html（表单练习）
07-22
表单练习，账号text，密码password，性别单选框radio，爱好多选框checkbox，地址下拉列表select，文本域textarea，提交按钮submit
form表单基本练习
weixin_43661378的博客
06-01 1251
代码如下所示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form表单基本练习</title> </head> <body> <img src="01.jpg"/> <form action="" method="post"> 用户: <input type="text" .
form表单标签的练习、以及table标签的运用
小熙的进化史
07-19 475
html，form表单标签的运用 form标签 文本表单 单选表单 复选框 下拉选项框 提交、重置哦、普通按钮 文本域 文件表单 form标签 所有的表单标签都需要放在form标签里面，有助于将表单数据传输给服务器。 <form action="image_01163邮箱.html" method="get"> <label for="email">电子邮箱：...
表单 form
weixin_46376652的博客
03-07 114
form action method：提交方式get/post name input 文本框行内块元素 password：密码框 submit：登录 reset：重置 redio：单选 name属性相同 checked disabled file：文件 type="color"type="week" type="month" type="date"type="time" type="range"type="number"autofocus required autocomplete placeholder
微信小程序学习demo：表单练习(源代码+截图)
06-19
微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+...
表单练习HTML5
LaoXieyyds的博客
07-21 809
HTML5表单练习，基础部分
JavaScript表单练习.zip
12-23
1． 掌握JavaScript脚本的调用和基本语法； 2． 掌握JavaScript常用内置对象的基本应用； 3． 掌握BOM和window消息对话框的使用； 4． 掌握HTML DOM动态网页设计技术。
form自动绑定demo
07-08
在IT行业中，表单自动绑定是一项重要的技术，它极大地提高了前端开发效率，简化了用户界面与后台数据交互的过程。这个"form自动绑定demo"正是一个示例，展示了如何利用JavaScript和Ajax技术实现这一功能。 首先，...
HTML表单练习
weixin_33676492的博客
01-14 178
最近学车啊，明天还要出去在外地练，电脑都摸不到了=-= HTML 表单用于搜集不同类型的用户输入，主要用于收集网页上浏览者的信息。HTML5 Input，拥有多个新的表单输入类型，提供了更好的输入控制和验证。 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。 表单使用表单标签（<form>）定义。 &l...
form表单小练习
xiaoLong2345的博客
09-26 641
声明：本人小白一枚，刚刚开始学习前端，把自己遇到的问题都放到了博客上，看看能对别人刚刚学习时能有点用不，
form表单练习代码
Tz。
04-08 853
代码如下：     年龄         1991         1992         1993         1994             邮箱     url：         DATE:     搜索：                             liuzhe       
Django——form表单与接口练习
cccxxxqq的博客
11-15 537
练习内容 创建message表单并渲染前端，通过前端将数据发送给后端，后端对message初步验证，验证通过存入数据库，失败返回错误信息。 接口传输 不能是dict，就是str 想要变成json类型：json.dumps( ) 反序列就是 json.loads( ) >>> import json >>> data = {'name': 'cong', 'age': 20} >>> data {'name': 'cong', 'age': 20} &gt
Django入门教程(十)Form表单练习二
cf313995的博客
10-30 344
1、新建项目和app。 流程简单，不再详细说明。不知道可以看前几篇文章。 2、准备材料 (1)、movie.html (2)、电影接口：http://api.map.baidu.com/telematics/v3/movie?qt=hot_movie&amp;amp;amp;location=郑州市&amp;amp;amp;ak=TueGDhCvwI6fOrQnLM0qmXxY9N0OkOiQ&amp;amp;amp;output=json (...
表单学习及练习
mover999的博客
05-25 696
这篇博客是我对form标签学习的一些认识。首先，最重要的是form不是from。在学习过程中注意到一些问题1.name，这个东西随便编，但是不准写汉字2.value：这个标签的内容比较广泛。根据你的内容相机而变。type="button", "reset", "submit" - 定义按钮上的显示的文本type="text", "password", "hidden" - 定义输入字段的初
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值