JavaScript（一）

最新推荐文章于 2021-05-27 20:36:03 发布

子木_Lee

最新推荐文章于 2021-05-27 20:36:03 发布

阅读量295

点赞数

分类专栏： JavaScript 文章标签：用JS完成简单的数据校验 JavaScript

本文链接：https://blog.csdn.net/qq_41819988/article/details/90769625

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

使用JS完成简单的数据校验

需求分析

使用JS完成对注册页面的简单数据校验,不允许出现用户名或密码为空的情况

技术分析

JavaScript概述

1，什么是javascript: JavaScript一种直译式脚本语言，

2，什么是脚本语言?

java源代码 ----> 编译成.class文件 -----> java虚拟机中才能执行

脚本语言: 源码 -------- > 解释执行（js由我们的浏览器来解释执行）

3，HTML: 决定了页面的框架

4，CSS: 用来美化我们的页面

5，JS: 提供用户的交互的

JS的组成:

ECMAScript : 核心部分 ,定义js的语法规范

DOM: document Object Model 文档对象模型 , 主要是用来管理页面的

BOM : Browser Object Model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高

JS的语法:

变量弱类型: var i = true

区分大小写

语句结束之后的分号 ,可以有,也可以没有

写在script标签

JS的数据类型:

基本类型

string

number

boolean

undefine

null

引用类型

对象, 内置对象

类型转换

js内部自动转换

JS的运算符和语句:

运算符和java 一样

"===" 全等号: 值和类型都必须相等

== 值相等就可以了

语句和java 一样

JS的输出

alert() 直接弹框

document.write() 向页面输出

console.log() 向控制台输出

innerHTML: 向页面输出

获取页面元素: document.getElementById("id的名称");

JS声明变量:

var 变量的名称 = 变量的值

JS声明函数:

var 函数的名称 = function(){

}

function 函数的名称(){

}

JS的开发步骤

1. 确定事件
2. 通常事件都会出发一个函数
3. 函数里面通常都会去操作页面元素,做一些交互动作

步骤分析:

1. 确认事件: 表单提交事件 onsubmit事件
           2. 事件所要触发的函数: checkForm
           3. 函数中要干的事情
               1. 校验用户名, 用户不能为空, 长度不能小于6位
               2. 校验密码，是否为123456
3.校验邮箱是否正确

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>校验</title>
		<!--
			1. 确认事件: 表单提交事件 onsubmit事件 
			2. 事件所要触发的函数: checkForm
			3. 函数中要干的事情
				1. 校验用户名, 用户不能为空, 长度不能小于6位
				2. 校验密码，是否为123456
                                3.校验邮箱是否正确
		-->
		<script>
			function checkform(){
				//用户名的校验
				var input1 = document.getElementById("username");
				var uValue = input1.value;
				if(uValue.length >= 6){
					
						//密码的校验
						var passwords = document.getElementById("password1");
						var upassward = passwords.value;
						if(upassward==123456){
							
							
									//邮箱的校验
									var email = document.getElementById("email")
									var uEmail = email.value;
									if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)){
										alert("请输入正确邮箱地址！");
									}else{
										alert("填写正确");
										return true;
									}
									
									
						}else{
							alert("请输入正确密码！")
						}
					
					
				}else{
					alert("用户名不得少于6个字符！");
				}
				
				
				
				return false;
			}
		</script>
		
	</head>
	<body>
		<form action="../02—网站注册页面优化/网站注册页面优化.html" onsubmit="return checkform()">
			用户名：<input id="username" type="text"/><br />
			密码：<input id="password1" type="password"/><br />
			邮箱：<input id="email" type="text"/><br />
			<input type="submit" value="提交" />
		</form>
		
	</body>
</html>

结果展示:

1，用户名格式输入错误

2，密码输入错误

3，邮箱格式输入错误

4，校验全部正确并跳转

子木_Lee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（一）

使用JS完成简单的数据校验需求分析使用JS完成对注册页面的简单数据校验,不允许出现用户名或密码为空的情况技术分析JavaScript概述1，什么是javascript: JavaScript一种直译式脚本语言，2，什么是脚本语言? java源代码 ----> 编译成.class文件 -----> java虚拟机中才能执行脚本语言:...
复制链接

扫一扫