标签：
对自己这两天学习html javascript的一个简单的小运用。如上图所示，一个简答的小页面，并未实现页面连接功能，只是有页面布局和事件处理。对姓名、密码、邮箱的输入格式要求，括不能为空、格式正确、长度大于6位
主要记录下自己的思路和克服的问题：
思路：页面布局完后，javascript 对页面文本框事件处理。
一丶通过window.onload() = function() {}来作为主体，表示页面加载完后运行函数。
二丶通过document.getElementById获得dom对象。
三丶通过format()函数来判断所得的值的格式符合什么样的条件，并返回相应的String:"above","kong","match"值
四丶姓名 密码 邮箱 分别 做个事件函数 dom对象.onblur = function () {}
五丶 分别将 dom对象.value 通过函数format()来判断得到的值，然后通过switch() {}来进行相应处理
六丶处理是将 输入框的文字看作是 span 再通过 dom对象.innerHTML赋值得到相应的改变。
解决问题和收获：
一丶开始采用的是别的思路。先将如果文本为空 作为一类函数 。 这样写的错误是姓名、密码、邮箱文本框被事件处理，后面如果在写格式正确和长度大于6位的函数又会对文本框onblur事件处理。而一个文本框只能一个相同事件处理，前面的 会被后面的所覆盖。所以就只能侦测到一种格式。 改为以姓名、密码、邮箱分别为一个函数处理。
function isNull(span,div) {
div.onblur = function() {
if (div.value == "") {
span.innerHTML = "<font color =red>为空</font>"
//获得js对象但是不能带js对象的属性赋值在利用。innerHTML需要每次代入写
}
}
}
isNull(namespan,namediv)
isNull(passwordspan,passworddiv)
isNull(emailspan,emaildiv)
二丶 获得dom对象的属性别先赋下来，属性是随着页面的变动而变动的，每次用dom对象.value来调用。
三丶div.onblur = function() 自己将他理解为一个阻塞式的函数。当执行到这里时程序会等着事件发生，如果发生了则会另开类似线程的将后面的执行并且会再会回到这里来等待。如果没有发生执行后面的但是也会留个线程来等待事件发生。
四丶html虽然是由上而下的执行，但是在javascript中上面的函数也可以调用下面的函数。
目标：用jQuery写出来 实现
<script type="text/javascript" src = "jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
var nameDiv = $("#namediv")
var nameSpan = $("#namespan")
var passwordDiv = $("#passworddiv")
var passwordSpan =$("#passwordspan")
var emailDiv = $("#emaildiv")
var emailSpan =$("#emailspan")
nameDiv.blur(function() {
var str = format(nameDiv.val())
//这里是个阻塞式程序 只要发生时间就再一次玩下执行，并且再次等待
switch(str) {
case "kong" :
nameSpan.html("<font color =red>姓名不为空</font>")
break;
case "above" :
nameSpan.html("<font color =red>正确</font>")
break;
default :
nameSpan.html( "<font color =red>需超过6位</font>")
}
})
//名字的
emailDiv.blur(function () {
var str = format(emailDiv.val())
//这里是个阻塞式程序 只要发生时间就再一次玩下执行，并且再次等待
switch(str) {
case "kong" :
emailSpan.html("<font color =red>不能为空</font>")
break;
case "match" :
emailSpan.html("<font color =red>正确</font>")
break;
default :
emailSpan.html("<font color =red>输入正确邮箱</font>")
}
})
passwordDiv.blur( function () {
var str = format(passwordDiv.val())
//这里是个阻塞式程序 只要发生时间就再一次玩下执行，并且再次等待
switch(str) {
case "kong" :
passwordSpan.html("<font color =red>不能为空</font>")
break;
case "above" :
passwordSpan.html( "<font color =red>正确</font>")
break;
default :
passwordSpan.html ("<font color =red>大于6位密码</font>")
}
})
function format(val) {
var email =/^(\w)+@(\w)+(\.\w+)+$/
var len = /^(\w){6,}$/
if(val == "") {
return "kong"
}
if(email.test(val)) {
return "match"
}
if(len.test(val)) {
return "above"
}
}
})
</script>
javascript +html代码
<html>
<head>
<title>注册页面</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
window.onload = function() {
var nameDiv = document.getElementById("namediv")
var nameSpan = document.getElementById("namespan")
/* var nameVal = nameDiv.value; */
//不能先得到他的value值因为随时都在改变，所以先得到不能用在后面
var passwordDiv = document.getElementById("passworddiv")
var passwordSpan = document.getElementById("passwordspan")
var emailDiv = document.getElementById("emaildiv")
var emailSpan = document.getElementById("emailspan")
nameDiv.onblur = function () {
var str = format(nameDiv.value)
//这里是个阻塞式程序 只要发生时间就再一次玩下执行，并且再次等待
switch(str) {
case "kong" :
nameSpan.innerHTML = "<font color =red>姓名不为空</font>"
break;
case "above" :
nameSpan.innerHTML = "<font color =red>正确</font>"
break;
default :
nameSpan.innerHTML = "<font color =red>需超过6位</font>"
}
}
//名字的
emailDiv.onblur = function () {
var str = format(emailDiv.value)
//这里是个阻塞式程序 只要发生时间就再一次玩下执行，并且再次等待
switch(str) {
case "kong" :
emailSpan.innerHTML = "<font color =red>不能为空</font>"
break;
case "match" :
emailSpan.innerHTML = "<font color =red>正确</font>"
break;
default :
emailSpan.innerHTML = "<font color =red>输入正确邮箱</font>"
}
}
passwordDiv.onblur = function () {
var str = format(passwordDiv.value)
//这里是个阻塞式程序 只要发生时间就再一次玩下执行，并且再次等待
switch(str) {
case "kong" :
passwordSpan.innerHTML = "<font color =red>不能为空</font>"
break;
case "above" :
passwordSpan.innerHTML = "<font color =red>正确</font>"
break;
default :
passwordSpan.innerHTML = "<font color =red>大于6位密码</font>"
}
}
function format(val) {
var email =/^(\w)+@(\w)+(\.\w+)+$/
var len = /^(\w){6,}$/
if(val == "") {
return "kong"
}
if(email.test(val)) {
return "match"
}
if(len.test(val)) {
return "above"
}
}
}
/* function isNull(span,div) {
div.onblur = function() {
if (div.value == "") {
span.innerHTML = "<font color =red>为空</font>"
//获得js对象但是不能带js对象的属性赋值在利用。innerHTML需要每次代入写
}
}
}
isNull(namespan,namediv)
isNull(passwordspan,passworddiv)
isNull(emailspan,emaildiv)
//下面的阻塞式只能一个进行事件检测。后面的会将前面的覆盖。
//所以设计程序的思想有错，应该先检测格式，再检测事件，而不是先检测事件
//再检测格式
document.getElementById("emaildiv").onblur =function() {
alert(1)
var email =/^(\w)+@(\w)+(\.\w+)+$/
if(email.test(emaildiv.value)) {
emailspan.innerHTML = "<font color =red>为空</font>"
}
}
*/
//下面类似一个阻塞式程序，程序执行到这个时候，会分为两个线程，一个线程
//继续执行，一个线程等着重复执行
/* namediv.onblur = function() {
if (namediv.value == "") {
alert(1)
namespan.innerHTML = "<font color =red>为空</font>"
//获得js对象但是不能带js对象的属性赋值在利用。innerHTML需要每次代入写
} */
</script>
</head>
<body>
<div id= top>
<table>
<tr>
<td><image src = images/logo.png width = 100 height = 30 ></image></td>
<td>
<image src = images/cart.gif></image>
<a><font>购物车</font> </a>|
<a><font>帮助中心</font></a>|
<a><font>我的账户</font></a>|
<a><font>新用户注册</font></a>
</td>
</tr>
</table>
</div>
<div id = menu>
<table bgcolor = #1C3F09 width = 100% >
<tr align = center>
<td>
<a href="http://www.baidu.com"><font color = white size = 5>文学</font></a>
<a><font color = white size = 5>生活</font></a>
<a><font color = white size = 5>计算机</font></a>
<a><font color = white size = 5>外语</font></a>
<a><font color = white size = 5>经管</font></a>
<a><font color = white size = 5>全部商品目录</font></a>
</td>
</tr>
</table>
</div >
<div id= content>
<table width = 100% bgcolor = #B6B684>
<tr>
<td align = right>
Search<input/ type = text name= text>
<input/ type=submit name=s value= 搜索>
</td>
</tr>
</table>
</div>
<div>
<table width = 100%>
<div>
<tr>
<table width=40% align = center >
<tr>
<td>
<h1>新会员注册</h1>
</td>
</tr>
</table>
</tr>
<form action = * method = get>
<table align = center>
<tr>
<td>姓名</td>
<td><input type = "text" name = "textname" value = "超过6位中文"
id = "namediv" />
</td>
<td>
<span id = "namespan"><font color =red>请输入姓名</font></span>
</td>
</tr>
<tr>
<td>密码</td>
<td><input type = "password" name = "passwordname" id = "passworddiv"/></td>
<td>
<span id = "passwordspan"><font color =red>请输入密码</font></span>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input/ type = "radio" name = "sex" value = girl checked = 0>女
<input/ type = radio name = sex value = boy>男
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input/ type = "checkbox" name = aihao value = basketball checked = 1>篮球
<input/type = "checkbox" name = aihao value = zuqiu > 足球
<input/type = "checkbox" name = aihao value = pingpang> 乒乓
</td>
</tr>
<tr>
<td> 国籍</td>
<td>
<select name = guoji size = 1>
<option value = china >中国</option>
<option value = america>美国</option>
<option value = japan>日本</option>
</select>
</td>
</tr>
<tr>
<td>邮箱</td>
<td><input/ type = text name = mail id = emaildiv></td>
<td>
<span id = "emailspan"><font color =red>请输入邮箱</font></span>
</td>
</tr>
<tr>
<td>上传头像</td>
<td><input/ type = file name = touxiang ></td>
</tr>
<tr>
<td> 备注</td>
<td><textarea name = text ></textarea></td>
</tr>
<tr align = "center">
<td colspan = 2>
<input/ type = submit name = zhuce value = 注册>
<input/ type = reset name = quxiao value = 取消>
</td>
</tr>
<tr align = center>
<td colspan = 2><input type = image name = xiangpian src = "img.jpg"/></td>
</tr>
</table>
</form>
</div>
</tr>
</table>
</div>
<div>
<table width=100%>
<tr>
<td rowspan=2 align = center>
<image src = "G:/myeclipse Workbench/day 01/WebRoot/html/images/logo.png"></image>
</td>
<td align =left>
CONTACT US
</td>
</tr>
<tr>
<td align =left>
copyright 2008©BookStore All Rights RESERVED
</td>
</tr>
</table>
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/lpydhbt/p/5114444.html
