一、实验目的
1.理解JavaScript脚本编程语言；
2.掌握JavaScript基本语法规则；
3.学会使用JavaScrip操作网页对象；
4.初步掌握正则表达式的使用
5.掌握在浏览器调试JavaScript代码
二、实验内容
- 创建用户注册页面文件register.html，界面如下图：
- 新建JavaScript文件verify.html" title=js>js，对注册信息进行验证，各输入项的验证要求如图所示，若输入数据不符要求，显示红色提示信息。验证成功才能提交，否则不能提交。数据验证规则如下：
- ①用户名由6-10位字母和数字组成，至少包含1个字母和1个数字；
- ②年龄不能小于17岁；
- ③密码由6-10位字符组成，至少包含1个字母、1个数字和1个特殊符号；
- ④邮箱地址包含@字符。
三、实验要求
1、功能实现思路：输入框用onBlur事件，当失去光标触发该事件，执行验证函数；数据验证使用正则表达式。
2、新建一个文件夹，以学号+姓名命名，将完成的register.html和verity.html" title=js>js拷贝到该文件夹下，并提交至作业服务器。
四、正则表达式简介
1.什么是正则表达式
-
正则表达式是一种字符串匹配的模式，通过字符串描述和匹配一系列符合某个句法的规则。
-
JavaScript提供一个RegExp对象来完成有关正则表达式的匹配功能，其语法格式如下：
var pattern = /规则描述/
了解更多，请访问: http://www.w3school.com.cn
2.正则表达式举例
如JavaScript代码：
3.正则表达式在线测试
http://www.regexp.cn/Regex
【我这篇主要是为了记录老师说的，利用浏览器的开发者工具调试代码】
1.将HTML文件用浏览器打开：
2.选中开发者工具：
3.可以看到是否报错，然后 根据报错的原因修改代码（修改代码就用记事本打开就OK了）即可
- 那我就稍微放一下我的代码哈。可能还有一些些问题,而且我还是用记事本写的，所以可能排版不是很好看：
register.html:
html"><html>
<head>
<title>register</title>
</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/html" title=html" title=java>javascript>html" title=java>javascript" src="verify.html" title=js>js">html" title=html" title=java>javascript>html" title=java>javascript">
</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.html" title=js>js :
html" title=html" title=java>javascript>html" title=java>javascript">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("提交失败！");
}
}
【本来呢，想的是昨天写完的，但是，前几周一直在忙，又很多事情，所以等到事情都基本完成，又可以回到轻松的周末的时候，就玩过头了，其实也还好啦，就真的挺想玩的呢，但是，想到毕业自己可能面临的结果还是觉得自己应该努力的，所以呀，加油呐~冲呀！💪(ง •_•)ง】
句子君：
《蓝色大门》：
“夏天过完了，好像什么事也没有做。”
“是啊，我们就只是跑来跑去，什么都没有做。”“但还是会留下些什么的吧。
留下什么，我们就变成什么样的大人。”
