1 表单验证

1.1为什么要表单验证

在前端（客户端）使用JS对表单的数据进行初步检验，确保到达服务器端的数据格式已经是正确的。大幅度的降低服务器端的压力。

1.2 表单验证的思路

思路一：

事件： onsubmit事件。

在from标签（元素）中存在事件obsubmit。这个事件的返回值将决定表单是否可以提交。当返回false时，表单是不能提交，其他的可以提交。

思路就是在onsubmit事件中进行数据校验，通过就返回true，不通过就返回false。

思路二：

当某一个表单域失去焦点是时，就进行数据校验。

扫描二维码关注公众号，回复： 4928677 查看本文章

1.3校验的实现一

有如下表单：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

</td>

</tr>

<tr>

</td>

<td>

</td>

</tr>

<tr>

</td>

<td>

</td>

</tr>

<tr>

</td>

<td>

</td>

</tr>

<tr>

</td>

<td>

</td>

</tr>

<tr>

<input type="radio" name="sex" value="1">男

<input type="radio" name="sex" value="2">女

<input type="radio" name="sex" value="3">不明

</td>

<td>

</td>

</tr>

<tr>

</select>

</td>

<td>

</td>

</tr>

<tr>

<input type="checkbox" name="enjoy" value="1"/>打野

<input type="checkbox" name="enjoy" value="2"/>团战

<input type="checkbox" name="enjoy" value="3"/>偷袭

</td>

<td>

</td>

</tr>

<tr>

</td>

<td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

思路：

在form的开始标签中添加onsubmit事件，编写js进行表单验证。

/*工具函数*/

/**

* [$ 通过ID获取元素]

* @param {[type]} id [description]

* @return {[type]} [description]

function $(id){

return document.getElementById(id);

}

/*控制台输出*/

function clog(v){

console.log(v);

}

/*表单校验*/

function checkForm(){

//校验用户名不能为空

var uname = $("uname").value;

if(uname==null || uname==''){

alert("用户名不能为空");

return false;

}

var upass = $("upass").value;

if(upass==null || upass==''){

alert("密码不能为空");

return false;

}

var uphone = $("uphone").value;

if(uphone==null || uphone==''){

alert("电话不能为空");

return false;

}

var uemail = $("uemail").value;

if(uemail==null || uemail==''){

alert("邮箱不能为空");

return false;

}

return true;

}

</script>

优化校验提示：

不使用alert方法，使用更友好的提示方式

例如：出现文字提示框，修改输入的颜色等等！

思路：

1 、将出错的输入框的边框修改为红色。

2 、在输入框的后方显示提示文字即可。

实现：

修改页面的HTML代码，添加提示信息要显示的span

添加提示的函数

/**

* [当验证出错时的提示]

* @param {[type]} msg [提示信息]

* @param {[type]} id [输入框的ID]

* @return {[type]} [description]

function errorTitle(msg,id){

//修改输入框的边框颜色

$(id).style.border='1px solid red';

//给span中添加提示信息

var msgSpane = $(id+"Title");

msgSpane.style.color='red';

msgSpane.innerText=msg;

}

效果：

1.4校验实现二

表单域失去交单的时候就开始校验。

使用到的事件:onblur。

别写oblur事件：

/*表单校验*/

function checkForm(){

return checkUname()&&checkUpass()&&checkUphone()&&checkUemail();

}

/*验证通过时的提示*/

function sucTitle(id){

//修改输入框的边框颜色

$(id).style.border='1px solid green';

//给span中添加提示信息

var msgSpane = $(id+"Title");

msgSpane.style.color='green';

msgSpane.innerText="√";

}

/*失去焦点的时候校验*/

function checkUname(){

//校验用户名不能为空

var uname = $("uname").value;

if(uname==null || uname==''){

//alert("用户名不能为空");

errorTitle("用户名不能为空","uname");

return false;

}else{

sucTitle("uname");

return true;

}

/*失去焦点的时候校验*/

function checkUpass(){

//校验用户名不能为空

var upass = $("upass").value;

if(upass==null || upass==''){

//alert("密码不能为空");

errorTitle("密码不能为空","upass");

return false;

}else{

sucTitle("upass");

return true;

}

/*失去焦点的时候校验*/

function checkUphone(){

var uphone = $("uphone").value;

if(uphone==null || uphone==''){

//alert("电话不能为空");

errorTitle("电话不能为空","uphone");

return false;

}else{

sucTitle("uphone");

return true;

}

/*失去焦点的时候校验*/

function checkUemail(){

var uemail = $("uemail").value;

if(uemail==null || uemail==''){

//alert("邮箱不能为空");

errorTitle("邮箱不能为空","uemail");

return false;

}else{

sucTitle("uemail");

return true;

}

给元素逐个添加oblur事件：

效果：

1.5表单校验的扩展

单选按钮的校验：获取所有的单选按钮，遍历检查其checked属性，判断是否被选中。

Select的校验：直接获取select对象，然后判断其value是否是需要的value。

Checkbox的校验和单选按钮的校验方式是一样的。

同意条款的设置：

添加一个checkbox按钮

将提交按钮修改为不可用状态：

通过JS校验是否勾选了同意按钮：

//动态的同意按钮添加事件

var ck = document.getElementById("ck");

ck.onclick=function(){

//通过逐层查找的方式找到按钮

var sbuBtn = document.forms[0].submit;

//根据复选框的情况设置按钮是否可用

if(ck.checked){

sbuBtn.disabled = false;

}else{

sbuBtn.disabled = true;

}

</script>

效果：

2 BOM

2.1 window对象的简介

BOM对象属于浏览器内置对象，不需要创建，可以直接使用。（JS是基于对象的语言）

我的理解:JS是纯粹的面向对象的语言。

Window （学习）
Navigator
Screen
History
Location

Window 对象

Window 对象表示浏览器中打开的窗口。

如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

2.2Window对象的属性：

document、history、Navigator、location、Screen

innerheight	返回窗口的文档显示区的高度。
innerwidth	返回窗口的文档显示区的宽度。
outerheight	返回窗口的外部高度。
outerwidth	返回窗口的外部宽度。

获取窗口的相关大小：

window.onload=function(){

clog(window.innerwidth);

clog(window.innerheight);

clog(window.outerwidth);

clog(window.outerheight);

/*Screen 获取分辨率*/

clog(window.screen.width);

clog(window.screen.height);

}

效果：

Window的4个属性很多浏览器不支持。

/*离屏幕左上角的偏移量*/

clog("screenX="+window.screenX);

clog("screenY="+window.screenY);

效果：

Parent属性：

Parent表示当前窗体的父窗体。

Iframe中IE浏览器支持，谷歌不支持

父窗口中函数：

window.showMsg=function(){

clog("这是主页面的一个函数showMsg");

}

子窗口中的调用：

window.onload=function(){

/*页面离窗体的左上角的偏移量*/

clog(window.pageXOffset);

clog(window.pageYOffset);

}

function showMsg(){

clog('子页面的showMsg');

//通过parent调用父页面的函数

window.parent.showMsg();

}

</script>

自定义的window对象的属性：

直接给window对象添加属性:

所有的隐式变量默认都是window对象的属性：

所有的函数都是window对象的方法。

2.3 Window对象的方法

三种提示的方法：

alert() 纯粹的消息提示。几乎没有人使用，因为很不友好。只有一个确定按钮。

confirm()确认对话框。有一定的使用频率。有一个确定和取消按钮。

Tips:点击确定按钮返回true，点击取消按钮返回false。

prompt() 可输入的对话框。

两个参数：第一个参数是提示信息，第二个参数是默认值。

当点击确定按钮时将返回输入的值，当点击取消按钮时将返回null。

open() 打开一个新窗体：

正因为各种浏览器都会拦截，所有就几乎被淘汰了。

close() 关闭当前的窗体

此方法被部分浏览器禁用，所以几乎被淘汰。

2.4定时器

setTimeout()

clearTimeout()

<!DOCTYPE html>

<html>

<head>

span{

display: block;

width: 30px;

height: 30px;

text-align: center;

border: 1px solid;

}

</style>

window.onload=function(){

showNum();

}

//申明一个对象，保存setTimeout的句柄(遥控器)

var timeOutInstance = undefined;

var num = 1;

/*使用setTimeOut计时*/

function showNum(){

$("time1").innerText=num;

num ++;

//使用定时器

//等待1000毫秒再执行showNum()函数一次

timeOutInstance = window.setTimeout('showNum()',1000);

}

/*停止setTimeout*/

function stopTime1(){

//使用clearTimeout停止(取消)setTimeout

window.clearTimeout(timeOutInstance);

timeOutInstance = undefined;

}

/*继续setiTimeout*/

function goTime1(){

if(timeOutInstance != undefined){

stopTime1();

}

showNum();

}

</script>

</head>

<body>

</body>

</html>

Tips:setTimeout特点是等待指定时间还行函数一次。如果需要循环的执行函数，则需递归调用。

setInterval()

clearInterval()

var num2 = 1;

function showNum2(){

$("time2").innerText=num2;

num2 ++;

}

/*申明一个对象存储setInterval的句柄*/

var interValInstance = undefined;

/*使用setInterval计时*/

function startTime2(){

/*每隔1000毫秒执行函数showNum2()一次*/

interValInstance = window.setInterval('showNum2()',1000);

}

function stopTime2(){

/*取消计时器*/

window.clearInterval(interValInstance);

}

setInterval特点是：每个指定时间执行指定函数。

2.5练习

[1]使用定时器完成一个无缝滚动

window.onload=function(){

//将d1的内容拷贝一份到d2中

$("d2").innerHTML = $("d1").innerHTML;

move();

}

var moveInstance = undefined;

function move(){

//设置垂直方向的滚动条

var box = $("box");

//取出其scrollTop

var top = box.scrollTop;

$("result").innerHTML=top;

if(top>=346){

//alert(top);

box.scrollTop = 5;

top = 5;

}

box.scrollTop=top+5;

moveInstance = setTimeout("move()",100);

}

function stopMove(){

clearTimeout(moveInstance);

moveInstance = undefined;

}

function startMove(){

if(moveInstance!=undefined){

stopMove();

}

move();

}

</script>

</div>

</div>

</body>

3 其他对象

3.1JavaScript 字符串(String)对象

构造一个字符串对象

在javaScript没有字符和字符串的区分，默认都是字符串，使用单引号或者双引号赋值都可以。同样也可以使用new 来创建一个字符串。

字符串属性：

Length属性，表示字符串的字符长度。

和java中String的API一致的方法：

charAt() 返回在指定位置的字符。

charCodeAt() 返回在指定的位置的字符的 Unicode 编码。 1 4

concat() 连接字符串。

indexOf() 检索字符串。

lastIndexOf() 从后向前搜索字符串。

localeCompare() 用本地特定的顺序来比较两个字符串。

match() 找到一个或多个正在表达式的匹配。

replace() 替换与正则表达式匹配的子串。

split() 把字符串分割为字符串数组。

substr() 从起始索引号提取字符串中指定数目的字符。 1 4

substring() 提取字符串中两个指定的索引号之间的字符。

toLowerCase() 把字符串转换为小写。 1 3

toUpperCase() 把字符串转换为大写。

toString() 返回字符串。 - -

valueOf() 返回某个字符串对象的原始值。

特殊的API：

anchor() 创建 HTML 锚。

big() 用大号字体显示字符串。

blink() 显示闪动字符串。

bold() 使用粗体显示字符串。

fixed() 以打字机文本显示字符串。 1 3

fontcolor() 使用指定的颜色来显示字符串。

fontsize() 使用指定的尺寸来显示字符串。

italics() 使用斜体显示字符串。

link() 将字符串显示为链接。

strike() 使用删除线来显示字符串。 1 3

sub() 把字符串显示为下标。

字符串的比较依然使用”==”

3.2日期对象

类似于java中的util.Date。获取处理日期对象。

创建系统当前日期:

类似于Calendar可以通过API逐个取出日趋中部分内容：

方法	描述
Date()	返回当日的日期和时间。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getYear()	请使用 getFullYear() 方法代替。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setYear()	请使用 setFullYear() 方法代替。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()	以毫秒设置 Date 对象。
toSource()	返回该对象的源代码。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toDateString()	把 Date 对象的日期部分转换为字符串。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
UTC()	根据世界时返回 1997 年 1 月 1 日到指定日期的毫秒数。
valueOf()	返回 Date 对象的原始值。

GetYear和getFullYear

TIPS：很多时候，js中的Date都是用不着的，因为是使用的客户端时间。很多时候我们都是需要使用服务器端的时间。

3.3数组

Js中没有List和Set这样的集合，所有js中的数组就是集合。

会自动增长。也会自动缩小，但是会有限制。

创建数组：

其中Array(3) 3指的是数组（集合）的最小长度。

数组的初始化：

Tips：

数组可以自动增长。
组接受不规则数据。
数组中的默认值是undefined。

遍历数组:

传统的for循环遍历：

Foreach遍历：

Tips：和java的不同点

用的不是”:”而是关键字:”in”。
X并不是每次循环中的数据，而是数组的索引。

JavaScript(三)

1 表单验证

1.1为什么要表单验证

1.2 表单验证的思路

1.3校验的实现一

1.4校验实现二

1.5表单校验的扩展

2 BOM

2.1 window对象的简介

2.2Window对象的属性：

2.3 Window对象的方法

2.4定时器

2.5练习

3 其他对象

3.1JavaScript 字符串(String)对象

3.2日期对象

3.3数组

未完待续。。。

猜你喜欢