基于html注册设计（正则表达式校验）

喾颛顼

已于 2022-05-15 14:28:35 修改

阅读量1k

点赞数 3

分类专栏： web 文章标签：单片机经验分享 c语言

于 2022-03-06 14:02:54 首次发布

本文链接：https://blog.csdn.net/qq_45171581/article/details/123309440

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基于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 >注册界面