实验四 JavaScript的使用

一、实验目的

1.理解JavaScript脚本编程语言;

2.掌握JavaScript基本语法规则;

3.学会使用JavaScrip操作网页对象;

4.初步掌握正则表达式的使用

5.掌握在浏览器调试JavaScript代码

二、实验内容

  • 创建用户注册页面文件register.html,界面如下图:
    实验四 JavaScript的使用_第1张图片
  • 新建JavaScript文件verify.js,对注册信息进行验证,各输入项的验证要求如图所示,若输入数据不符要求,显示红色提示信息。验证成功才能提交,否则不能提交。数据验证规则如下:
  • ①用户名由6-10位字母和数字组成,至少包含1个字母和1个数字;
  • ②年龄不能小于17岁;
  • ③密码由6-10位字符组成,至少包含1个字母、1个数字和1个特殊符号;
  • ④邮箱地址包含@字符。

三、实验要求

1、功能实现思路:输入框用onBlur事件,当失去光标触发该事件,执行验证函数;数据验证使用正则表达式。

2、新建一个文件夹,以学号+姓名命名,将完成的register.html和verity.js拷贝到该文件夹下,并提交至作业服务器。

四、正则表达式简介

1.什么是正则表达式

  • 正则表达式是一种字符串匹配的模式,通过字符串描述和匹配一系列符合某个句法的规则。

  • JavaScript提供一个RegExp对象来完成有关正则表达式的匹配功能,其语法格式如下:

               var pattern = /规则描述/
    

了解更多,请访问: http://www.w3school.com.cn

2.正则表达式举例
实验四 JavaScript的使用_第2张图片
如JavaScript代码:
实验四 JavaScript的使用_第3张图片
3.正则表达式在线测试
http://www.regexp.cn/Regex


【我这篇主要是为了记录老师说的,利用浏览器的开发者工具调试代码】


1.将HTML文件用浏览器打开:
实验四 JavaScript的使用_第4张图片
2.选中开发者工具:
实验四 JavaScript的使用_第5张图片
3.可以看到是否报错,然后 根据报错的原因修改代码(修改代码就用记事本打开就OK了)即可
实验四 JavaScript的使用_第6张图片

  • 那我就稍微放一下我的代码哈。可能还有一些些问题,而且我还是用记事本写的,所以可能排版不是很好看:

register.html:

<html>
<head>
<title>registertitle>
head>
<style type="text/css">
body
{
      
   text_align:center;
}
  table,td{
      
   margin:0 auto;
   text-align:center;
}
div{
      
  text-align:left;
  width:300px;
  color:red
}
.text1{
      
  border-radius:8px;
  width:200px;
  height:25px;
}
.button{
      
  border-radius:5px;
}
style>
<script type="text/javascript" src="verify.js">
script>
head>
<body>
<h2 align="center">用户注册信息h2>
<hr>
<form id="test" align="left" onsubmit="validate()">
<table>
<tr>
<td>用户名*:td>
<td><input type="text" class="text1" id="username" title="用户名由6-10位字母和数字组成,至少包含1个字母和1个数字" size="20" onblur="nameverify()">td><td><div name="nameerror" id="nameerror">div>td> 
tr>
<tr>
<td>年龄*:td>
<td><input type="text" class="text1" id="age" title="年龄不能小于17岁" size="20" onblur="ageverify()">td><td><div id="ageerror">div>td>
tr>
<tr>
<td>密码*:td>
<td><input type="password" class="text1" id="password1" title="密码由6-10位字符组成,至少包含1个字母、1个数字和一个特殊符号" size="20" onblur="password1verify()">td><td><div id="password1error">div>td>
tr>
<tr>
<td>确认密码*:td>
<td><input type="password" class="text1" id="password2" size="20" onblur="password2verify()">td><td><div id="password2error">td>div>
tr>
<tr>
<td>电子邮件*:td>
<td><input type="text" class="text1" id="email" title="邮箱地址包含@字符" size="20" onblur="emailverify()"><td><div id="emailerror">td>td>
tr>
<tr>
<td>电话:td>
<td><input type="text" class="text1" id="number1" size="20" >td>
tr>
<tr>
<td>QQ号码:td>
<td><input type="text" class="text1" id="number2" size="20" >td>
tr>
<tr>
<td>td>
<td><input   type="submit"  class="button" value="提交" onclick="fun()">
<input   type="reset"   class="button" value="重置">td>
tr>	
table>
form>
hr>
body>
html>

verify.js :

var usernameok=false;
var ageok=false;
var password1ok=false;
var password2ok=false;
var emailok=false;
function nameverify(){
     
	var username=document.getElementById("username");
	var nameerror=document.getElementById("nameerror");	
	var pattern=/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,10}$/;
	if(!pattern.test(username.value)){
     
		nameerror.innerHTML="用户名为空或格式错误!";
		}
	else{
     
		nameerror.innerHTML="";
		usernameok=true;
	        }
}
function ageverify(){
     
                       var age=document.getElementById("age");
                       var ageerror=document.getElementById("ageerror");
                       if(isNaN(age.value)||age.value<17){
     
                                          ageerror.innerHTML="年龄不能小于17岁!";
                            }
                        else{
     
                                   ageerror.innerHTML="";
                                   ageok=true;    
                               }
}

function password1verify(){
     
                       var password1=document.getElementById("password1");
                       var password1error=document.getElementById("password1error");
                       var pattern=/^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&]).{6,10}$/;
                       if(!pattern.test(password1.value)){
     
                                        password1error.innerHTML="密码不能为空或格式错误!";
                           }
                       else{
     
                                  password1error.innerHTML="";
                                  password1ok=true;
                              }
}

function password2verify(){
     
	     var password1=document.getElementById("password1");
                     var password2=document.getElementById("password2");
                     var password2error=document.getElementById("password2error");
                     var pattern=/^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&]).{6,10}$/;
                     if(password2.value!=password1.value){
     
                                   password2error.innerHTML="两次密码不一致!";
                      }
                    else if (password1.value==""){
     
                              
                              password2error.innerHTML="请先填写密码!";
                              password2ok=true;
                           }
                    else{
     
                         password2error.innerHTML="";
             
                    password2ok=false;
                   }
}

function emailverify(){
     
                        var email=document.getElementById("email");
                        var emailerror=document.getElementById("emailerror");
                        var pattern=/^(?=.*[@]).+$/;
                        if(!pattern.test(email.value)){
     
                                         emailerror.innerHTML="邮箱地址格式错误!";
                             }
                        else{
     
                                      emailerror.innerHTML="";
                                      emailok=true;
                               }
}

function fun(){
     
    if (usernameok&&ageok&&password1ok&& password2ok&&emailok){
     
		alert("提交成功!");
	}
    else{
     
		alert("提交失败!");
	}
}

【本来呢,想的是昨天写完的,但是,前几周一直在忙,又很多事情,所以等到事情都基本完成,又可以回到轻松的周末的时候,就玩过头了,其实也还好啦,就真的挺想玩的呢,但是,想到毕业自己可能面临的结果还是觉得自己应该努力的,所以呀,加油呐~冲呀!(ง •_•)ง】

句子君:
《蓝色大门》:
“夏天过完了,好像什么事也没有做。”
  “是啊,我们就只是跑来跑去,什么都没有做。”

“但还是会留下些什么的吧。
留下什么,我们就变成什么样的大人。”

你可能感兴趣的:(Web技术基础-HTML,javascript,java,js,html)