web实验三、javascript编程
1、实验内容:
在第二次实验的feedback.html的表单增加js:
在载入feedback.html的时候,根据当前时间,输出“早上好”,“下午好”,“晚上好”等信息。
若检测到页面卸载事件,则弹出comfirm框“您确定退出吗”
浏览者完成留言板后按下方的按钮后,js自动检查昵称,联系电话,联系邮箱,建议这些输入框有没有输入内容,若有任意一项留空,则弹出提示框警示“不能为空”;
若全部非空,则检查联系电话是否为标准的手机号(全11位的数字),以及联系邮箱是否合法(必须含有@字符)
上述检查若某个输入不合法,则除了弹出提示外,还将光标定位在该输入控件。
若通过上述检查步骤,则提交表单(见下页幻灯片)
2、实验步骤:
(1)打开feedback.html文件
(2)在html文件的头部加入script标签,在标签中根据题目所需要求写入相应的JS代码
3.主要代码:
<!DOCTYPE html>
<html lang="en" >
<head >
<meta charset="UTF-8">
<title>表单的创建</title>
<style>
.form1{
border: 1px solid;
text-align: left;
width: 500px;
top: 5px;
}
textarea{
width: 20em;
height: 10em;
display: block;
margin: 10px;
}
</style>
<script>
window.οnlοad=toload;
function toload(){
var timelabel=document.getElementById("timelabel");
var date=new Date();
//date.setTime(date.getTime()+2*60*60*1000); //用于调试
var h=date.getHours();
if(h>=6&&h<12){
timelabel.innerText="早上好";
}else if(h>=12&&h<19){
timelabel.innerText="下午好";
}else if(h>=19&&h<23){
timelabel.innerText="晚上好";
}else{
timelabel.innerText="夜深了!请注意休息!!!";
}
}
//用于判断输入是否合法
function Check(form){
var N1=document.getElementById("name1");
var N2=document.getElementById("name2");
var N3=document.getElementById("name3");
var N4=document.getElementById("name4");
var N5=document.getElementById("name5");
if(N1.value.replace(/(^\s*)|(\s*$)/g,"")==""||N2.value.replace(/(^\s*)|(\s*$)/g,"")==""||N3.value.replace(/(^\s*)|(\s*$)/g,"")==""||
N4.value.replace(/(^\s*)|(\s*$)/g,"")==""||N5.value.replace(/(^\s*)|(\s*$)/g,"")==""){
alert("输入不能为空");
return false;
} else{
var mobiles=document.getElementById("name2").value;
/*var youxiang=document.getElementById("name3").value;*/
var reg=/^1\d{10}$/; //正则表达式
var bb=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;//正则表达式
if(reg.test(mobiles)==false){
alert("号码错误");
document.getElementById("name2").focus();//联系电话框重新获得焦点
return false;
}else if(bb.test(N3.value)==false){
alert("邮箱错误");
N3.focus();//联系电话框重新获得焦点
return false;
}
else{
alert("所有信息合法可以提交信息");
form.action="upsave.jsp";
form.submit();
}
}
}
//window.οnbefοreunlοad=onunload_message; 在目前多数浏览器中,当卸载事件发生后onunload事件才会被触发
//但是此时页面已经被销毁所以confirm方法已经被锁定销毁了,所以不能弹出提示框,即此方法几乎没什么作用
//window.οnbefοreunlοad=onunload_message();
function onunload_message(){
var B=confirm("你确定退出吗?");
if(B){
window.close();
}
}
</script>
</head>
<body οnbefοreunlοad="onunload_message()">
<h1>表单的简单创建</h1>
<hr>
<form action="URL" method="post" name="form1" class="form1" >
<label for="name1">用户名字:</label>
<input type="text" name="name1" id="name1">
<br><br>
<label for="name2">联系电话:</label>
<input type="text" name="name2" id="name2">
<br><br>
<label for="name3">联系邮箱:</label>
<input type="email" name="name3" id="name3" >
<br>
<br>
<label for="name4">留言标题:</label>
<input type="text" name="name4" id="name4">
<br>
<textarea name="name5" id="name5">请在此处编辑您的留言</textarea>
<input type="reset" value="重置">
<input type="submit" value="提交" οnclick="return Check(this.form)"> <!-- 此处必须使用return来判断是否提交表单 -->
</form>
<label name="timelabel" id="timelabel" >早上好!!!</label>
</body>
</html>
注意点:
- onunload和beforeunload的区别,beforeunload事件发生在页面关闭或者刷新事件之前,onunload事件发生在页面关闭事件发生之后;此处应该使用beforeunload不然不会出现提示框。
- <input type="email" name="name3" id="name3" >虽然html5中对邮箱格式具有初步验证的作用,但是偶尔会出现某些浏览器输入邮箱时即使没有@字符也不会出现提示邮箱格式不对的提示,所以在js中依旧加入了邮箱验证的正则表达式。
- 谷歌浏览器不兼容关闭页面时弹出是否关闭页面的提示,IE浏览器可以支持。