javaScript-06 表单验证 详细易懂，加案例分析

目录

一.JS表单验证基本介绍

1.1.JS表单验证概述

1.2表单验证的作用

1.3JS表单验证需求分析

二.JavaScript 事件列表

三.表单验证方式

3.1 string常见方法

3.2 案例

例：submit事件

例：焦点事件

四.表单验证方式二

4.1正则表达式概述

4.2 定义方式

4.3 正则规则符号介绍

 4.4案例

五.案例

例：漂浮广告

例：放大镜

---

一.JS表单验证基本介绍

1.1.JS表单验证概述

• 表单验证是JavaScript中高级选项之一。
• JavaScript可用来在大数据被送往服务器前对HTML表单中的这些输入数据进行验证。

1.2表单验证的作用

 减轻服务器的压力

如果没有表单验证那么用户输入的账号密码就要先发送到服务器验证，这样的话如果同时有多个设备同时发送请求那么就会很影响性能

保证输入的数据符合要求

如果我们在用户输入的时候就开始验证，要是符合规则的话我们就可以直接发送到服务器这样服务器就不需要验证了直接可以接受了

1.3JS表单验证需求分析

表单验证需求
    1、用户名不能为空
    2、用户名必须在6-14位
    3、用户名和密码由数字和字母组成（正则表达式）
    4、密码和确认密码一致，邮箱地址合法
    5、统一失去焦点验证
    6、错误信息统一在span标签中显示，要求字体12号，红色，验证成功显示绿色字体
    7、文本框获得焦点，清除错误信息，如果文本框中数据不合法，要求清空文本框的value
    8、最终表单所有项均合法方可提交

二.JavaScript 事件列表

在网页中不同的元素在操作过程中会激活一些不同操作。如：鼠标单击，按下键盘，失去焦点等。我们可以针对这些操作进行代码的编写。

//方式一：命名函数


//方式二：匿名函数
元素对象.onclick = function () {
	事件处理的代码
}

事件名	作用
onclick	单击事件
ondblclick	双击事件
onload	加载完毕
onfocus	得到焦点
onblur	失去焦点
onchange	改变事件
onmouseover	鼠标上移
onmouseout	鼠标移除
onsubmit	表单提交事件

三.表单验证方式

3.1 string常见方法

indexOf(), lastIndexOf() 查找字符位置
charAt() 按索引返回字符串
concat() 拼接字符串
substr()  按长度截取字符串
slice() 截取字符串
substring() 截取字符串
replace() 替换字符串
toUpperCase(), toLowerCase() 大小写转换

3.2 案例

例：submit事件

	
		
		
	
	
		
		
		

			账号 
			

			密码 
			

			
		
		
	

例：焦点事件

	
		
		
		
	
	
		

			账号 
			
			

			密码	
			
			

			
		
		
		
	

四.表单验证方式二

4.1正则表达式概述

• 正则表达式使用单个字符串来描述，匹配一系列符合某个句法规则的字符串搜索模式
• 用某种模式去匹配一类字符串的公式

4.2 定义方式

//字面量方式，其由包含在斜杠之间的模式组成，如下所示：
var re = /ab+c/;
//构造函数方式，调用RegExp对象的构造函数，如下所示：
var re = new RegExp("ab+c");


var regex = /正则规则/;
//调用方法判断是否满足要求
var flag = regex.test('内容');

4.3 正则规则符号介绍

 4.4案例

	
	
	

		

			
				账号：
				
			
		
		

			
				密码：
				
			
		
		注册
		清空/重置
	
	
	

五.案例

例：漂浮广告

例：放大镜

function $(id) {
	return document.getElementById(id);
}


function getStyle(obj, name) {
	if (obj.currentStyle) { //兼容IE
		return obj.currentStyle[name];
	} else { //非IE
		return getComputedStyle(obj, false)[name];
	}
}
//封装可视区宽度和高度的一个方法
function client() {
	if (window.innerWidth != null) // ie9 +  最新浏览器
	{
		return {
			width: window.innerWidth,
			height: window.innerHeight
		}
	} else if (document.compatMode === "CSS1Compat") // 标准浏览器
	{
		return {
			width: document.documentElement.clientWidth,
			height: document.documentElement.clientHeight
		}
	}
	return { // 怪异浏览器
		width: document.body.clientWidth,
		height: document.body.clientHeight

	}
}

/**
 * scroll()方法的封装
 */
function scroll() {
	//直接return一个json对象
	return {
		"left": window.pageXOffset || document.documentElement.left || document.body.scrollLeft,
		"top": window.pageYOffset || document.documentElement.top || document.body.scrollTop
	};
}

// 获得鼠标位置（兼容多浏览器ie,firefox）
function mouseCoords(ev) {
    if (ev.pageX || ev.pageY) {
		return {
			x: ev.pageX,
			y: ev.pageY
		};
    }
    return {
		x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y: ev.clientY + document.body.scrollTop - document.body.clientTop
    };
}