开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScriptBOM、数据交互JSON、表单验证 -> 正文阅读

[JavaScript知识库]JavaScriptBOM、数据交互JSON、表单验证

Java学习打卡：第88天

javaWeb — Javascript收尾和JSP以及制作

Java（打卡第88天)

JavaScript和JSP

JavaScript只查最后一点内容了，但这部分内容很重要，包括表单提交的还有正则表达式

首先继续来看DOM编程

获取文本框的value

这个其实很简单，文本框的value是默认的，就是用户输入的；想要获取直接获取到文本框对象，通过.value就可以获取到其value的内容

<script type="text/javascript">
	//给获取用户名按钮绑定单击事件
			document.getElementById("but1").onclick = function(){
				var user = document.getElementById("username");
				alert(user.value);
			}
</script>

获取下拉列表选中项的value change事件

这个的应用还是很广泛的，就是在进行选择住址的时候，比如选择河北省，那么就会在第二栏中显示河北的所有的市，选中市之后又会在第三列显示县；这项功能就要求获取下拉列表的选中项的value

这里获取选中项和复选框的获取又不一样了。这里需要使用的是change事件，这是专门服务下拉列表的事件

document.getElementById("province").onchange = function(){
		alert(this.value);
    //等同于document.getElementById("province").value  因为都是上面的value；和复选框不同
}

this.value就可以获取到当前选中项的value。this就代表的当前的选中项对象；注意这里的和上面的获取回车有区别；括号中传入的是一个事件对象，而不是选中的对象；因为敲击键盘有很多事件对象，回车、ESC都是；但是这里的change对象是改变；但是不代表选中项

显示网页时钟 setinerval clearInterval

这里比如给一个div，给一个按钮；点击之后就要将系统的时间填充到div中

//获取系统当前时间
document.getElementById("timebut").onclick = function(){
	var div = document.getElementById("div1");
	var time = new Date().toLocaleString();
	div.innerText = time;
}

这里的HTML网页

<br><br>
<input id="timebut" type="button" value="显示系统当前时间"/><br>
<div id="div1" style="background-color: aquamarine;border: 1px solid black;width: auto;height: 30px;"></div>

但是这样子，需要用户自己点击，才能更新时间，如何自己运行？

interval 间隔； window对象有一个setinterval的函数可以设置周期函数

setinterval(fun,time) time为毫秒，就是每个多少毫秒执行一次fun函数

所以这里就可以将获取时间的过程放入函数，然后每隔1000毫秒执行一次

注意interval函数中第一项的函数名是字符串形式并且要带()

//获取系统当前时间
var div = document.getElementById("div1");
getCurruTime = function(){
	var time = new Date().toLocaleString();
	div.innerText = time;
}
				
document.getElementById("timebut").onclick = function(){
	window.setInterval("getCurruTime()",1000);
}

那想要让时间停止怎么做?

写一个时间停止按钮，点击之后停止时间；这里其实上面的setInterval有一个返回值，将这个返回值传递给clearInterval就可以停止周期函数

//获取系统当前时间
var div = document.getElementById("div1");
getCurruTime = function(){
	var time = new Date().toLocaleString();
	div.innerText = time;
}
				
document.getElementById("timebut").onclick = function(){
	v = window.setInterval("getCurruTime()",1000);
}
//停止时间
document.getElementById("stopbut").onclick = function(){
	window.clearInterval(v);
}

这里停止时间为了能取得上面的值，所以接收返回值的对象就没有var，这样这个v就是全局变量，下面是可见的

返回值是一个可以取消周期性调用的value

BOM

窗口的开启和关闭

窗口的开启有一个函数为window.open(url,type)

这里第一个就是开启的网页的位置，默认情况下是重新进入窗口，修改type为"_self"就是在当前页面打开窗口

这里的开启位置有几种：默认是_blank,和超链接差不多，都是向服务器发送请求的

_self 当前页面
_blank 新窗口
_parent 父窗口
_top 顶级窗口

//打开窗口和关闭窗口
document.getElementById("openwindow").onclick = function(){
	window.open("study.html","_self");
}
//window.close()关闭窗口

alert和confirm

alert是弹出一个会话【消息】框，confrim是弹出一个确认框

确认框就是Swing中也有，之前的聊天室中就使用了确认的组件

confirm就是用户删除数据的时候要让用户确认是否删除

//删除数据，确认框
document.getElementById("confirmbut").onclick =function(){
	if(confirm("真的要删除数据吗？")) {
		alert("数据删除成功！");
    }
}

这里就是点击了按钮之后会弹出一个确认框，有确认和取消两个按钮，确认才会执行

确认框有一个boolean类型的返回值，用户点击确定返回的就是true；然后就可以用这个返回值来执行操作

将窗口设置为顶级窗口

什么是顶级窗口？一个网页是可以如何构成

一种常见的网页就是有logo，有一个操作菜单，有一个工作区，点击操作菜单的选项，工作区就会发生变化

在这里插入图片描述

比如这里就是演示了一个基本的网页的部分

在常见的状态中，比如用户很久都没有操纵，然后回来的时候点击左边的操作菜单，那么就会重新让登录【操作超时】但是如果没有其他的设置，那么登录界面就会出现在工作区；这个不符合要求；因为最好要整个页面都是登录界面，而不是只是在工作区

iframe标签 src设置路径 width height 设置大小

如何实现的窗口嵌套呢？

这里使用iframe就可以嵌套窗口

<iframe src="study.html" width="600px" height="300px"></iframe>

比如这样就可以将这个窗口当作一个组件给放在当前窗口中了

那么现在如何将study.html设置为顶级窗口；

if(window.top != window.self){
    //将当前窗口设置为顶级窗口
    window.top.location = window.self.location(); //Location代表的是地址；就是将顶级窗口的地址设置为当前窗口的地址
}

历史记录 window.history.back() .go(1)

比如从一个页面跳转到另外一个页面之后，那么可以后退到原来的界面

比如给新界面加一个按钮为后退按钮

doucument.getElementById("backbutton").onclick = function(){
	window.history.back(); //同时也可以用go(-1)来表示后退
}

//前进也简单，就将back换成history； 但是一定要跳转到之前的页面之后后退之后才能前进
window.history.go(1);

window.location.href 跳转页面的URL href可以省略

window.location就是窗口的地址

跳转页面有多种方式：在地址栏写URL；可以点击超链接；同时也可以提交表单 ----都是发送请求

也可以使用window.open来打开

还可以使用windown.location.href ----- 其实就是将当前窗口的地址栏给写成URL然后自动跳转

<script type="text/javascript">
	gobaidu = function(){
		window.location.href = "http://baidu.com";
        window.location = "http://baidu.com";
        document.location.href = "http://baidu.com";
        document.location = "http://baidu.com";
        //上面的四种写法都是可以的
    }
</script>

<input type="button" value="百度" onclick="goback()"> //这里的onclick的写法和setinterval中的函数写法相同

window的open和超链接基本上是一样的，target也是超链接中的target属性

eval函数将字符串当作JS解释执行

window.eval可以将一段字符串当作一段JS代码解释并执行

doucument.getElementById("backbutton").onclick = function(){
	window.eval ="window.history.back()";
}

//这样写的效果就是直接写后面的JS代码的效果

ECMAscript补：JSON创建、访问

JSON 就是JavaScript objec notation【notation 标记，标注 markup】 JavaScript标记对象，简称JSON，是一种轻量级数据交换格式

轻量级： JSON体积小，虽然一个小的体积但是可能表示的数据很多
数据交换： C语言与java交换数据，python和java交换数据；不同的语言之间进行数据通信；在JS中，JSON是以对象的形式存在； JSON和XML都是标准的数据交换格式，XML是重量级的，体积大，解析要困难一些

比如C语言查询数据库之后，拼接了一个xml格式的字符串【如下】，然后通过网络的形式传给了java；java收到XML之后开始解析，获得XML中的数据，这样就完成了数据交换；XML是一种国际通用的数据交换格式，java和JavaScript可以用，java和c++也可以用；这里的JSON是一种轻量级的数据

<?xml version="1.0" encoding="gbk"?>
<students>
	<student>
    	<name>张三</name>
        <age>20</age>
    </student>
    <student>
    	<name>李四</name>
        <age>29</age>
    </student>
    <student>
    	<name>王五</name>
        <age>30</age>
    </student>
</students>

XML语法严格，体积大，解析难度大【一般严谨的系统都会采用XML】； JSON是一种轻量级的字符串； JSON同样是一种国际化的标准的数据交换格式；所以java和JavaScript就可以使用JSON来进行数据交互；----- 不同语言之间交换数据；java和JavaScript是不同的语言

JSON对象的定义格式

在JavaScript中，怎么定义JSON形式的对象，如何访问属性呢？

//语法格式
var jsonObj ={
    "属性名": 属性值,
    "属性名": 属性值,
    "属性名": 属性值,
    ……
}
//属性值可以是任意类型   这种和Map相似，key  value

这里和CSS的定义不一样，这里的是逗号

在JS中，[]代表的是数组对象，{}是JSON对象，就是因为JSON使用了大括号，所以数组只能使用中括号了，其实用逗号隔开就符合数据每一项用逗号隔开

//其实JSON就是一个无类型的对象
var emp = {
    "empno":7369,               //属性名是字符串的格式
    "ename":SMITH,
    "sal": 300
}

这样就定义好了一个JSON对象，注意，这里和类又不一样

如何访问呢？就是用对象名.key就可以了；所以说和Map的key-value相似

//第一种方式：.引用
console.log(emp.empno);

//第二种方式：和类同，e["ename"]   类的这种方式是方便for in的
console.log(e["empno"]);

像类的对象就是要定义一个类，之后通过new一个对象，然后再查找属性；而JSON不需要先定义类，直接创建一个对象，用大括号包起来即可

JSON对象中的属性也可以是一个数组

//JSON对象
var stu1 = {
	"name":"zhangsan",
	"sex":false,
	"intrest":["soccer","tennis","basketball"]
	}
	console.log(stu1.name);
    console.log(stu1.sex?"女":"男");
for(var i = 0; i < stu1.intrest.length; i++) {
	console.log(stu1.intrest[i]);
}

这里给intrest赋值的时候赋值的是一个数组，这都是可以的，数组也是对象

JSON对象属性值可以是JSON

既然属性值可以是任意的，那么这里就可以赋值为一个JSON对象，就像一个套娃的过程

var stu1 = {
		"name":"zhangsan",
		"sex":false,
		"intrest":["soccer","tennis","basketball"],
		"class":{"clasNo":1901,"className":"HCone","calssLoc":"3floor2room"}
}

console.log(stu1.class.className);//获取的是班级的名称

这里就像数据库表的关联一样，比如数据库表里包括学生表和班级表，通过学生表查班级表的内容

同时需要注意数组的元素的对象还可以是一个JSON

比如设计一个班级表，可以包含全班的总人数还有每个人的信息

var students = {
	"total": 4;
    "data":[{},{},{},{}]           //里面的每个JSON对象代表一个学生
}

//这里取出信息很easy
for(var i = 0; i < students.data.length; i++) {
	var s = students.data[i];
    console.log(s.name + "," + s.age);
}

JSON很容易解析，就一直.引用就可以了；JSON是一个对象

java传送转义字符串，JS拼接使用eval执行

java和javas如何交换数据呢？

可以使用JSON格式的字符串。JSON是一种轻量级的数据交换格式。java的JDBC连接数据库查询数据。然后将数据拼接成JSON格式的字符串。将JSON格式的字符串传送给JavaScript，然后再JS中把JSON格式的字符串转化为JSON对象 ---- 这样就可以从JSON对象中取数据，这样就完成了数据交换【java和JS】

JSON格式的字符串：注意，这里一定要使用转义字符，里面的每个双引号都需要转义字符

var fromJavaJSON = "{\"name\":\"zhangsan\",\"age\":20}";
//注意是JSON大括号中的所有的"都需要加上转义字符\

这是可以使用转义字符将"转化为引号的字符串形式

转化的目的就是完成数据交换

//JSNO字符串转JSON对象
var formjavaJSON = "{\"name\":\"zhangsan\",\"age\":20}";
//转换为JSON，使用eval来执行字符串为JS
window.eval("var stuJSON =" + formjavaJSON);
console.log("下面的不予");
console.log(stuJSON.name + "," + stuJSON.age);

//这里可以看一下结果
17:10:48.264 下面的不予 at DOMstudy.html:86
17:10:48.264 zhangsan,20 at DOMstudy.html:87

这里就是这样子的，就是java只要传送一个特殊格式的字符串给JavaScript，然后拼接一个"var stu = "，之后使用window的eval函数执行为JS代码就可以获得数据显示再前端的界面

拼接html的方式，设置table的tbody

这里就先给一个表

<table border="1px" width="50%" bordercolor="green">
				<tr>
					<th colspan="3">学生信息表</th>
				</tr>
				<tr>
					<th>学生序号</th>
					<th>学生姓名</th>
					<th>学生年龄</th>
				</tr>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>23</td>
				</tr>
				<tr>
					<td>2</td>
					<td>李四</td>
					<td>22</td>
				</tr>
				<tr>
					<td>3</td>
					<td>王五</td>
					<td>22</td>
				</tr>
		</table>

学生信息表
学生序号	学生姓名	学生年龄
1	张三	23
2	李四	22
3	王五	22

这里再typora中可以显示的，不知道会不会乱码再blog中

这里把中间的数据部分给注释掉

现在的需求就是后端的JAVA传送过来一波数据，现在就要将这波数据给放在表中。

{\"total\":3,\"data\":[{\"id\":1,\"name\":\"张三\",\"age\":23},{\"id\":2,\"name\":\"李四\",\"age\":33},{\"id\":3,\"name\":\"王五\",\"age\":25}]}

这里可以使用工具EditPlus；就是使用search—>replace---->replace all；这样就将"换成 \加"就可以方便操作

向表中插入数据也是使用的是innerHTML，可以将后面的字符串当作HTML插入到表格当中

//所以这里的方式就是循环之后，拼接一个HTML字符串
var htmlString = "";                    //这里要放在外面，不然设置的就是最后一条数据
for(var i = 0; i < stus.data.length; i++) {
	var s = stus.data[i];
	htmlString += "<tr>";
	htmlString += "<td>"+s.id+"</td>";
	htmlString += "<td>"+s.name+"</td>";
	htmlString += "<td>"+s.age+"</td>";
	htmlString += "</tr>";
}
document.getElementById("tabody").innerHTML = htmlString;

这里样就可以插入了，但是需要注意，设置数据的位置是再tbody中，不是整个表，不包括表头

这里可以看下整个HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSON对象</title>
		<script type="text/javascript">
			window.onload = function(){
				var datafromJava = "{\"total\":3,\"data\":[{\"id\":1,\"name\":\"张三\",\"age\":23},{\"id\":2,\"name\":\"李四\",\"age\":33},{\"id\":3,\"name\":\"王五\",\"age\":25}]}";
				document.getElementById("but1").onclick = function(){
					var stu = "var stus =" +datafromJava;
					window.eval(stu);   //获得了一个JSON对象
					document.getElementById("span1").innerHTML = stus.total;
					//想要插入数据，那就是获取到数组的数据，循环插入
					var htmlString = "";                    //这里要放在外面，不然设置的就是最后一条数据
					for(var i = 0; i < stus.data.length; i++) {
						var s = stus.data[i];
						htmlString += "<tr>";
						htmlString += "<td>"+s.id+"</td>";
						htmlString += "<td>"+s.name+"</td>";   //这里就是要注意这里的必须是HTML格式的，就是将这个格式的HTML放在表体中
						htmlString += "<td>"+s.age+"</td>";
						htmlString += "</tr>";
					}
					document.getElementById("tabody").innerHTML = htmlString;
				}
			}
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="插入数据"/>
		<table border="1px" width="50%" bordercolor="green">
				<tr>
					<th colspan="3">学生信息表</th>
				</tr>
				<tr>
					<th>学生序号</th>
					<th>学生姓名</th>
					<th>学生年龄</th>
				</tr>        <!--这里不是整个表，tbody只是下面的表的数据-->
				<tbody id = "tabody">
					<!--
					<tr>
						<td>1</td>
						<td>张三</td>
						<td>23</td>
					</tr>
					<tr>
						<td>2</td>
						<td>李四</td>
						<td>22</td>
					</tr>
					<tr>
						<td>3</td>
						<td>王五</td>
						<td>22</td>
					</tr>
					-->
				</tbody>
		</table>
		总记录条数<span id="span1">0</span>条
	</body>
</html>

这样就可以实现java和JavaScript的交互了，java使用JDBC从数据库获取数据，然后就可以发送字符串，之后就可以

正则表达式格式验证

正则表达式是独立的学科，基本每一个语言都支持，正则表达式不是JS专属，但是JS中使用居多。通常正则表达式用来做字符串的匹配，正则表达式是一组特殊符号组成的表达式，每一个特殊符号都有一个特殊的代表含义

例如：电话号码的正则表达式，邮箱的正则表达式比如再注册用户的时候手机号随意填写时不能的，输入之后会和底层的正则表达式匹配，失败就提示

常见的正则表达式

.匹配换行符以外的任意字符当其中必须有. 那么就要使用 \加.来得到字符.
\w匹配任意的字母或者数组或者下划线或者汉字
\s匹配任意的空白符
\b匹配单词的开始和结束
^匹配字符串的开始
$匹配字符串的结束

匹配字数【匹配前面的字符出现的次数】

* 重复零次或者更多次
+ 重复一次或更多次
? 重复0次或者1次
{n}重复n次
{n,}重复n次或者更多次
{n,m}重复n到m次

反义字符

\W 匹配任意不是字母或者数字或者下划线或者汉字
\S 匹配任意的不是空白符
\D 匹配任意非数字的字符
\B 匹配不是单词开头或结束的位置
[^x] 匹配除x外的任意字符
[^aeiou]匹配除了aeiou之外的任意字符

[a-z] 匹配a到z的任意字符
|代表或者

这里举一个例子

[a-z]{1}a到z所有字符中的任意1个
[a-zA-Z0-9]{3,}前面的字符中至少出现3个
[1-9][0-9]{4,9}  最小的qq是10000 第一位不是0

创建正则表达式对象

创建的方式有2种，第一种的格式为

var regExp = /正则表达式/标记    直接量语法--常用


//第二种方式
var regExp = new RegExp("正则表达式","标记")   使用内置的类

标记有g全局global i表示忽略大小写ignorecase gi：全局扫描且忽略大小写

regExp重要的方法test 可以检查是否匹配上

//注意正则表达式一定是义/开始和/结束的，不要加"
var regExp = /[1-9][0-9]{4,9}/g
regExp.test(document.getElementById("QQ").value);
这样就可以验证用户输入的数据是否是格式正确的

String也是支持正则表达式的

之前的replace方法只能替换掉第一个字符，那么如何替换掉全局的字符呢

var data = "1920-12-03";
//使用正则表达式
data.replace(/-/g,"/");  这里就代表将全部的-替换成/

所以最主要的就是正则表达式要使用两个/；而且使用正则表达式的test方法验证

表单验证

这里可以看一个表单填写的要求

用户名不能为空
用户名必须再6-14位之间
用户名只能由数字和字母组成，不能含有其他的符号{正则表达式}
密码和确认密码一直，邮箱地址合法
统一失去焦点再验证 onblur
错误提示信息统一再span标签种提示，并且要求字体位12号，红色
文本框再次获得焦点，清空错误信息，如果文本框中的数据不合法要求清空文本框的value
最终表单所有项目合法就可以提交

这里可以先来验证用户名

用户名要求不能为空，那就是失去焦点的时候判断value是否为空串，如果是就判断报错；错误信息可以用span放在文本框的后面，不用div，会独占一行，会自动变化大小；同时还要验证获得焦点的时候清空错误信息

所以就用onblur onfocus 使用span的innerHTML或者Text都可以

window.onload = function(){
//给username绑定事件
document.getElementById("username").onblur = function(){
	var name = document.getElementById("username").value;
	//可能有空白，要取出空白
	name = name.trim();  //和mysql一样
	//用户名不能空
	if(name == ""){//不能用div 会独占一行   不用length，低级
		document.getElementById("nameError").innerHTML = "用户名不能为空"
	}
}
//获得焦点的时候就要清空错误信息
document.getElementById("username").onfocus = function(){
	document.getElementById("nameError").innerHTML = "";
 }
}

HTML的部分

<body>
		<table>
			<tr>
				<td>用户名</td>
				<td><input type="text" name="username" id="username"/>  <span id ="nameError"></span></td>
			</tr>
			<tr>
				<td>密码</td>
				<td><input type="password" name="userpwd"/></td>
			</tr>
			<tr>
				<td>确认密码</td>
				<td><input type="password"/><span id ="pwdError"></span></td>
			</tr>
			<tr>
				<td><input type="submit" value="注册"/></td>
			</tr>
		</table>
	</body>

最主要的就是注意使用的是span

接下来再来判断一下用户名再6-14之间;这里还是失去焦点的时候判断，所以还是再onblur中

//用户名长度只能在6-14之间  -- 也是失去焦点的时候判断
if(name.length < 6 || name.length > 14){
	document.getElementById("nameError").innerHTML = "用户名长度只能在6-14之间";
}

接下来就是进行正则匹配，匹配就是再长度合适的基础上

//因为要求由字母和数字组成，用户名是一个字符串，那就是^开始$结束,可以出现1次即任意多次，就是+
/^[a-zA-Z0-9]+$/

else{
		var regExp = /^[0-9a-zA-Z]+$/;
		if(!regExp.test(name)){
			document.getElementById("nameError").innerHTML = "用户名只能由字母和数字组成";
		}

这里的三个也是递进关系，所以放在else中,先判空，再判长，再判格式

if(name == ""){//不能用div 会独占一行   不用length，低级
		document.getElementById("nameError").innerHTML = "用户名不能为空"
	}else{
		//用户名长度只能在6-14之间  -- 也是失去焦点的时候判断
		if(name.length < 6 || name.length > 14){
			document.getElementById("nameError").innerHTML = "用户名长度只能在6-14之间";
		}else{
			var regExp = /^[0-9a-zA-Z]+$/;
			if(!regExp.test(name)){
				document.getElementById("nameError").innerHTML = "用户名只能由字母和数字组成";
			}
		}
	}

这样子，用户名的判断就完成了

接下来看一下密码

主要看密码是否一致

注意，确认密码不需要写name，因为不需要提交

document.getElementById("confirmpwd").onblur = function(){
	//获取两次的密码，一致与否
	var firpwd = document.getElementById("userpwd").value;
	var conpwd = document.getElementById("confirmpwd").value;
	if(firpwd != conpwd){
		document.getElementById("pwdError").innerHTML = "输入密码不一致";
	}
}

但是这样子的问题就是最后的注册按钮，就算是错误的也会提交，因为按钮是submit，没有拦截成功；所以要将按钮改为button

那么如何提交呢？这里就使用JS代码提交；注册一个单击事件，就所有的事件都合法的就提交

//拿到表单对象，使用.submit()就可以提交

那么怎么判断所有的表单项都合法

JS代码触发事件

可以调用对象的blur()和focus()手动让项失去焦点；其他的事件也是一样的

//点击之后验证用户名和密码；就是让两者都失去焦点；但是要先获得焦点，之后才能失去焦点

//注册按钮的事件
document.getElementById("logbutt").onclick = function(){
	console.log(1);
	//要先获得焦点才能失去焦点
	document.getElementById("username").focus();
	document.getElementById("username").blur();
	//密码同理
	document.getElementById("confirmpwd").focus();
	document.getElementById("confirmpwd").blur();
	if(document.getElementById("pwdError").innerHTML == "" && document.getElementById("nameError").innerHTML == ""){ //所有的errorspan都是空白
		document.getElementById("userform").submit(); //提交
		}
	}

这里可以看一下整个的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单验证</title>
		<style>
			span{
				font-size: 12px;
				color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//给username绑定事件
				document.getElementById("username").onblur = function(){
					var name = document.getElementById("username").value;
					//可能有空白，要取出空白
					name = name.trim();  //和mysql一样
					//用户名不能空
					if(name == ""){//不能用div 会独占一行   不用length，低级
						document.getElementById("nameError").innerHTML = "用户名不能为空"
					}else{
						//用户名长度只能在6-14之间  -- 也是失去焦点的时候判断
						if(name.length < 6 || name.length > 14){
							document.getElementById("nameError").innerHTML = "用户名长度只能在6-14之间";
						}else{
							var regExp = /^[0-9a-zA-Z]+$/;
							if(!regExp.test(name)){
								document.getElementById("nameError").innerHTML = "用户名只能由字母和数字组成";
							}
						}
					}
		
				}
				//获得焦点的时候就要清空错误信息
				document.getElementById("username").onfocus = function(){
					document.getElementById("nameError").innerHTML = "";
				}
				
				//密码验证
				document.getElementById("confirmpwd").onblur = function(){
					//获取两次的密码，一致与否
					var firpwd = document.getElementById("userpwd").value;
					var conpwd = document.getElementById("confirmpwd").value;
					if(firpwd != conpwd){
						document.getElementById("pwdError").innerHTML = "输入密码不一致";
					}
				}
				
				//获得焦点的时候就要清空错误信息
				document.getElementById("confirmpwd").onfocus = function(){
					document.getElementById("pwdError").innerHTML = "";
				}
				
				
				//注册按钮的事件
				document.getElementById("logbutt").onclick = function(){
					console.log(1);
					//要先获得焦点才能失去焦点
					document.getElementById("username").focus();
					document.getElementById("username").blur();
					//密码同理
					document.getElementById("confirmpwd").focus();
					document.getElementById("confirmpwd").blur();
					if(document.getElementById("pwdError").innerHTML == "" && document.getElementById("nameError").innerHTML == ""){
						document.getElementById("userform").submit(); //提交
					}
				}
			}
		</script>
	</head>
	<body>
		<form id="userform" action= "study.html" method="get">
			<table>
				<tr>
					<td>用户名</td>
					<td><input type="text" name="username" id="username"/>  <span id ="nameError"></span></td>
				</tr>
				<tr>
					<td>密码</td>
					<td><input type="password" name="userpwd" id="userpwd"/></td>
				</tr>
				<tr>
					<td>确认密码</td>
					<td><input type="password" id="confirmpwd"/><span id ="pwdError"></span></td>
				</tr>
				<tr>
					<td><input type="button" id="logbutt" value="注册"/></td>
				</tr>
			</table>
		</form>
	</body>
</html>