基于html注册设计(正则表达式校验)
一、原示例代码
主界面部分代码
(注册成功后,3秒左右跳转到注册界面)
<!DOCTYPE html>
<!--设置语言为中文-->
<html lang="zh-CN" xmlns:s="http://www.w3.org/1999/XSL/Transform">
<head>
<!--设置字体格式为utf-8-->
<meta charset="UTF-8">
<title>实验一、表单实例</title>
<!--表单控件:用户输入数据,比如说输入用户名,输入密码。
提示信息:告诉用户输入框要输入什么值。
表单域:标识表单的开始和结束,语法<form>提示信息:表单控件</form>
-->
<!--<form>常用的属性:
action:表示表单要提交的位置、
method:表单提交的方式,常用的有get提交和post提交,默认提交方式是get。
get和post区别:
1、get提交:数据会显示在浏览器的地址栏,不安全,提交的数据大小是有限制。
2、post提交:数据不会显示在地址栏,是安全的,提交的数据大小没有限制。
-->
<!--合并操作:
要确定表格有多少行和多少列
要确定合并的是行,还是列。
合并行:rowspan,合并单元格:colspan
-->
</head>
<script>
//1.当失去焦点时,用户名校验函数
function checkUserName(){
//获取到usernameID对应的input元素节点和username对应的校验span元素节点
var usernameNode = document.getElementById("usernameID");
var usernameCheckNode = document.getElementById("usernameCheckID");
//定义校验正则(\u4E00-\u9FA5代表中文)
var usernameReg = /^[\u4e00-\u9fa50-9A-Za-z]{
6,10}$/ig;
//获取到username元素节点的value属性值
var usernameValue = usernameNode.value;
//判断value属性值是否匹配正则并进行相关处理
if (usernameReg.test(usernameValue)) {
usernameCheckNode.innerText = "用户名输入成功!"; //当用户名输入成功时候的校验结果
usernameCheckNode.style.color = "green";
return true;
} else{
usernameCheckNode.innerText = "用户名输入失败!请输入6~10由字母或数字或汉字组成的用户名"; //当用户名输入失败时候的校验结果
usernameCheckNode.style.color = "red";
return false;
}
}
//2.当失去焦点时,密码校验函数
function checkPassword(){
//获取到passwordID对应的input元素节点和password对应的校验span元素节点
var passwordNode = document.getElementById("passwordID");
var passwordCheckNode = document.getElementById("passwordCheckID");
//定义校验正则(至少八个字符,至少一个大写字母,一个小写字母,一个数字和一个特殊字符)
var passwordReg = new RegExp("^(?=.*[a-zA-Z\d])[!-~]{8,16}$","ig");
//获取到password元素节点的value属性值
var passwordValue = passwordNode.value;
//判断value属性值是否匹配正则并进行相关处理
if (passwordReg.test(passwordValue)) {
passwordCheckNode.innerText = "密码输入成功!"; //当密码输入成功时候的校验结果
passwordCheckNode.style.color = "green";
return true;
} else{
passwordCheckNode.innerText = "密码输入失败!密码为8~16位,要求由字母字符数字组成"; //当密码输入失败时候的校验结果
passwordCheckNode.style.color = "red";
return false;
}
}
注册跳转部分代码
<meta charset="utf-8" http-equiv="refresh" content="3;URL=41shwTest1Form.html" >
<title>注册成功</title>
</head>
<body>
<!--进行元素定位,z-index 属性指定一个元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。-->
<div id="Layer1" style="position:absolute; width:100%; height:100%; background-color: snow; z-index:-1" >
<!--设置背景图片的宽度和高度-->
<img src="beijing.jpg" height="100%" width="100%"/>
</div>
<font color=#2XAAA >注册界面
二、项目测试截图
注册界面
校验提示
头像校验
注册成功
完整源代码和文件: