WEB实现注册页面，技术栈（JavaScript、CSS、HTML）

最新推荐文章于 2024-06-16 23:04:02 发布

_码农耕地人

最新推荐文章于 2024-06-16 23:04:02 发布

阅读量1.1k

点赞数 1

分类专栏： WEB开发文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_60414376/article/details/122082108

版权

WEB开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

将相对应的代码粘贴在对应的文件下，或者直接修改我的script和link路径可以直接运行~

直接上成品：（提交之后会将内容显示在网址中）

知识总结：

1、提交的数据放到form属性中
2、method想让其显示在网址上，要给下面label中的添加name属性
3、提交类题：将要提交的内容和submit按钮放在一个form中。给form添加一个onsubmit属性，里用js实现规则
4、submit只有函数返回为true时才会提交操作，每次点击submit属性都会刷新一次页面。

一）HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" type="text/css" href="log2.css">
    <script type="text/javascript" src="log3.js"></script>
</head>
<body >
    <div id="div">
        <h3>旺财云注册</h3><!--action是提交的服务器地址，method是否将提交的写在网址上-->
        <form action="#" method="get" id="re" onsubmit="sub()">
            <input type="text" name="user:" placeholder="userName...." id="userName"><br>
            <input type="password" name="passWord:" placeholder="passWord...." id="passWord"><br>
            <input type="submit" value="注册" id="button" >
        </form>
    </div>
</body>
</html>

二）CSS代码：

/*简单的CSS样式设置*/
#div{
    width: 200px;
    height: 150px;
    background: cornflowerblue;
    text-align: center;
    position: relative;
    left: 270px;
}
#button{
    width: 170px;
    position: relative;
    top: 10px;
}

三）JavaScript代码：

分为两部分，sub函数是本文用到的，方法二是另一种思路。

function sub (){
    //通过函数添加规则
    let user= document.getElementById("userName").value;
    let passWord= document.getElementById("passWord").value;
    let regUser=/^[a-zA-Z]{4,16}$/;
    let regPassWord=/^[1-9]{6}$/;
    if(!regUser.test(user)){
        alert("请输入4到16位纯字母");
        return false;
    }
    if (!regPassWord.test(passWord)){
        alert("请输入6位纯数字的密码");
        return false;
    }
    return true;
}


//解决方法二，本案例没用此方法
window.onload=function() {
//通过JavaScript的dom和bom来给form添加事件
    document.getElementById("re").onsubmit = function () {
        let user = document.getElementById("userName").value;
        let passWord = document.getElementById("passWord").value;
        let regUser = /^[a-zA-Z]{4,16}$/;
        let regPassWord = /^[1-9]{6}$/;
        if (!regUser.test(user)) {
            alert("请输入4到16位纯字母");
            return false;
        }
        if (!regPassWord.test(passWord)) {
            alert("请输入6位纯数字的密码");
            return false;
        }
        return true;
    }
}

_码农耕地人

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
WEB实现注册页面，技术栈（JavaScript、CSS、HTML）

当然还是给想白嫖的小伙伴提示：想直接拿走需要创建三个文件，然后将相对应的代码粘贴进去就行了，或者直接修改我的script和link路径也可以~直接上成品：（提交之后会将内容显示在网址中）知识总结：1、提交的数据放到form属性中2、method想让其显示在网址上，要给下面label中的添加name属性3、提交类题：将要提交的内容和submit按钮放在一个form中。给form添加一个onsubmit属性，里用js实现规则4、submit只有函数返回为true时才会提交操作，每次..
复制链接

扫一扫

专栏目录