完成登录与注册页面的前端

完成登录与注册页面的HTML+CSS+JS，其中的输入项检查包括：

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录</title><script src="../static/js/wr.js"></script><link href="../static/css/wr.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box"><h2>登录</h2><div class="input-box"><input type="text" name="firstname" placeholder="输入用户名"><br></div><div class="input_box"><input id="upass" type="password" placeholder="输入密码" ></div><div id="error_box"><br></div><div class="input_box"><button onclick="fnLogin()">登录</button>
</body>
</html>

function fnLogin() {var oUname = document.getElementById("uname");var oUpass = document.getElementById("upass");var oError = document.getElementById("error_box");oError.innerHTML="<br>"//unameif(oUname.value.length>20 || oUname.value.length < 6){oError.innerHTML = "name:6-20";return;}else if((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){oError.innerHTML="first number.";return;}else for(var i=0;i<oUname.value.length;i++){if((oUname.value.charCodeAt(i)<48)||oUname.value.charCodeAt(i)>57)&& (oUname.value.charCodeAt(i)<97||oUname.value.charCodeAt(i)>122)){oError.innerHTML="用户名只能包括字母和数字";return;}}//upassif(oUpass.value.length>20 || oUpass.value.length <6){oError.innerHTML="password:6-20";return;}window.alert("登录成功")
}

*{margin: 0;padding: 0;font-family: "微软雅黑";font-size: 12px;
}
.box{width: 390px;height: 320px;border: salmon;background:seashell;position: absolute;left: 50%;top: 42%;margin-left: -195px;margin-top: -160px;
}

转载于:https://www.cnblogs.com/caoxinwen092/p/7767805.html

完成登录与注册页面的前端相关推荐

JavaScript+css实现的响应式登录注册页面web前端html源码
大家好,今天给大家介绍一款,JavaScript+css实现的响应式登录注册页面web前端html源码(图1).送给大家哦,获取方式在本文末尾. 图1 响应式设计,适应各种分辨率(图2) 图2 登录界 ...
前端开发学习--登录和注册页面设计（html和css，可完成两个页面点击切换）
今天学习了登录和注册页面的设计,主要是HTML和CSS部分,注册和切换采用了Js代码进行,后面将通过js进行填写内容的验证,进而可通过JSP跳转到Servlet进行DAO数据的校验,这属于后端部分了. ...
jsp java servlet_jsp+java ，servlet如何实现用户登录和注册页面
jsp+java servlet实现简单用户登录(使用数据库,包括注册页面) 功能介绍本项目通过使用jsp和servlet实现简单的用户登录.主要逻辑为:如果用户不存在,则首先进行注册(注册信息同步 ...
一个注册页面的前端模板（html+css+javascript）可自适应屏幕
一个注册页面的前端模板(html+css+javascript)可自适应屏幕,修改样式即可用. 截图代码 <!DOCTYPE html> <html><head> ...
Ant Design 编写登录和注册页面
Ant Design编写登录和注册页面前言一.登录 1.index.tsx页面 2.index.module.less 二,注册 1.index.tsx 2.index.module.less 总 ...
从0开始写Vue项目-Vue页面主体布局和登录、注册页面
1.从0开始写Vue项目-环境和项目搭建_慕言要努力的博客-CSDN博客 2. 从0开始写Vue项目-Vue2集成Element-ui和后台主体框架搭建_慕言要努力的博客-CSDN博客一.主体布局 ...
WordPress自定义登录和注册页面样式并且添加验证码
通过一番尝试和验证以及网络搜索,终于实现了WordPress默认的登录和注册界面的样式修改,下面把过程记录下来.笔者主要是通过在主题中添加WordPress的钩子来实现登录和注册界面的样式修改的.Wo ...
vue3 导航守卫（在没有登录时只能一直在登录和注册页面）
记录在学习vue中的一些问题导航守卫,官方文档给出的定义: 你可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ - ...
Java实现登录与注册页面
用java实现的登录与注册页面,实现了客户端(浏览器)到服务器(Tomcat)再到后端(servlet程序)数据的交互.这里在注册页面加入了验证码验证. 注册的html代码,页面非常丑!!请见谅.. ...

完成登录与注册页面的前端

完成登录与注册页面的前端相关推荐

最新文章

热门文章