html用户注册界面

 

先上一张简约的界面的效果图

这里是style里面的内容

<style>

        input[type]{

            border: 1px solid darkorange;

            background: white;

        }

        #button{

            border: 10px solid orange;

            width: 200px;

            box-shadow:0px 4px 5px #666;

            background: orange;

            color: white;

        }

    </style>

再来body里面的内容,这里用到的是失焦 onblur  和聚焦 onfocus

<body>
<center>
<div>
<form>
<h3>用户注册</h3>
<hr>
<p>用户名:<input type="text" id="name" placeholder="请填写用户名" required="required" onblur="name1()" <!--onfocus="name2()-->"><br><span id="tel"></span></p>
<p>密码:<input id="paswd" type="password" placeholder="请填写密码" onblur="pwd1()" required="required" onfocus="pwd2()"><br><span id="pw"></span></p>
<p>确认密码:<input id="paswd2" type="password" placeholder="请确认密码" required="required" onkeyup="validate()" ><br><span id="qpwtx"></span></p>
<p>邮箱:<input type="email" placeholder="请填写邮箱" required="required"></p>
<p><input type="checkbox" required="required">我已阅读注册手册</p>
<p><input type="submit" id="button" value="注册"></p>
</form>
</div>
</center>
</body>

最后是js里面的代码

<script>
function name1(){
var name=document.getElementById("name").value;
if(name.length==""){
document.getElementById("tel").innerHTML="用户名不能为空"
document.getElementById("tel").style.color="red";
}else{
document.getElementById("tel").innerHTML="√"
document.getElementById("tel").style.color="green";
}
}
// function name2(){
// document.getElementById("tel").innerHTML="请填写用户名"
// document.getElementById("tel").style.color="#999";
// }
function pwd2(){
document.getElementById("pw").innerHTML="请填写6-12位的密码"
document.getElementById("pw").style.color="#999";

}
function pwd1(){
p=document.getElementById("paswd").value;

if(p.length>=6&&p.length<=20)
{
document.getElementById("pw").innerHTML="√"
document.getElementById("pw").style.color="green";
}else{
document.getElementById("pw").innerHTML="格式错误,请输入6-20位"
document.getElementById("pw").style.color="red";
}
}
function validate(){
var qpw=document.getElementById("paswd").value;
var qpw2=document.getElementById("paswd2").value;

if(qpw==qpw2 && p.length>=6&&p.length<=20){
document.getElementById("qpwtx").innerHTML="<font color='green'>√</font>";
document.getElementById("button").disabled = false;
}
else { 
document.getElementById("qpwtx").innerHTML="<font color='red'>两次密码不相同或者格式错误</font>";
document.getElementById("button").disabled = true;
}
}

</script>

html用户注册界面的更多相关文章

  1. php创建新用户注册界面布局实例

    php创建新用户注册界面布局实例 <!DOCTYPE> <html> <head> <title>Load page</title> < ...

  2. html+css的用户注册界面

    注册界面样图 代码实现 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  3. Android之QQ新用户注册界面1

    还没到睡觉时间所以再加了一个界面... 问题: 1.下拉列表(因为还没看到这里...) 2.标题栏显示问题 3.按钮的 Enable 设置 .......... 以下是代码: 布局 fragment_ ...

  4. Java-Web 用html写一个简单的用户注册界面

    代码: <!doctype htpl> <html> <head> <meta charset="utf-8" /> <tit ...

  5. Android物联网应用程序开发（智慧城市）—— 用户注册界面开发

    效果: 布局代码: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns: ...

  6. HTML登录注册界面怎么制作？

    在没有学习CSS样式的前提下,是如何做一个简单的注册界面的. 一.表单标签(form) 首先我们先写一个<form></form>的标签,form标签属于表单标签,通常我们的登 ...

  7. express框架+jade+bootstrap+mysql开发用户注册登录项目

    完整的项目代码(github):https://github.com/suqinhui/express-demo express是基于Node.js平台的web应用开发框架,用express框架开发w ...

  8. HTML表格表单综合——用户注册表

    今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  9. ASP.NET Core 一步步搭建个人网站（2）_一键部署和用户注册登录

    俗话说,磨刀不费砍柴工.为了更方便的进行项目管理,我们先将个人网站项目配置一下,满足以下2个目标: VS2017中支持Git存储库,绑定Github项目,实现本地VS程序与线上Github一键代码提交 ...

随机推荐

  1. java1.8函数式接口

    package com.wzy.t1; @FunctionalInterface//此注解用来声明此接口为函数式接口 public interface People { /** * 1.函数式接口只能 ...

  2. Hibernate选择题总结

    Hibernate选择题总结 1．在Hibernate中,以下关于主键生成器说法错误的是( ). A．increment可以用于类型为long.short或byte的主键 B．identity用于如S ...

  3. C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 服务器之间的接口通讯功、信息交换

    1:当远程调用方法时,会有很多种可能性发生.接口调用之后,发生错误是什么原因发生的?反馈给开发人员需要精确.精准.高效率,这时候若能返回出错状态信息的详细信息,接口之间的调用就会非常顺利,各种复杂问题 ...

  4. js/jquery的应用

    1.JS限制文本框只能输入整数或小数 <script language="JavaScript" type="text/javascript"> f ...

  5. 平行四边形导航，背景颜色渐变动画（不支持IE6/7/8）

    body{ font-size: 14px; } ul ,li{ margin:0px; padding:0px; list-style: none; } .box{ width: 1000px; h ...

  6. console.log((function f(n){return ((n > 1) ? n * f(n-1) : n)})(5))调用解析

    console.log((function f(n){) ? n * f(n-) : n)})()); 5被传入到函数,函数内部三元计算,5 > 1成立,运算结果是5*f(4),二次运算,5*4 ...

  7. VB.net Wcf事件广播（订阅、发布）

    这篇东西原写在csdn.net上,最近新开通了博客想把零散在各处的都转移到一处.   一.源起 学WCF有一段时间了,可是无论是微软的WebCast还是其他网上的教程,亦或我购买的几本书中,都没有怎么 ...

  8. String()与 toString()

    我们知道String()与 .toString()都是可以转换为字符串类型,但是String()与 .toString()的还是有区别的 1..toString()可以将所有的的数据都转换为字符串,但 ...

  9. IIS如何配置可以下载APK、IPA文件

    解决步骤: 1).打开IIS服务管理器,找到服务器,右键-属性,打开IIS服务属性: 2.单击MIME类型下的“MIME类型”按钮,打开MIME类型设置窗口: 3).单击“新建”,建立新的MIME类型 ...

  10. JS中匿名函数$(function(){ })和(function(){})()的区别

    “$(function(){ });” Jquery语法的匿名函数,用于存放操作DOM对象的代码,执行其中代码时DOM对象已存在: (通过这样就可以在页面加载完成时通过ajax再异步加载一些数据) “ ...