javascript编程

最新推荐文章于 2019-05-08 22:53:51 发布

兮兮子玉

最新推荐文章于 2019-05-08 22:53:51 发布

阅读量748

点赞数

分类专栏： web前端课程实验文章标签： html、JavaScript的简单使用方法初学JavaScript onunload和beforeunload的区别 javascript编程邮箱格式验证正则表达式

本文链接：https://blog.csdn.net/qq_41330485/article/details/80888393

版权

web前端课程实验专栏收录该内容

4 篇文章 2 订阅

订阅专栏

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浏览器可以支持。

兮兮子玉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript编程

web实验三、javascript编程1、实验内容：在第二次实验的feedback.html的表单增加js：在载入feedback.html的时候，根据当前时间，输出“早上好”，“下午好”，“晚上好”等信息。若检测到页面卸载事件，则弹出comfirm框“您确定退出吗”浏览者完成留言板后按下方的按钮后，js自动检查昵称，联系电话，联系邮箱，建议这些输入框有没有输入内容，若有任意一项留空，则弹出提示框...
复制链接

扫一扫