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. 第32课 Qt中的文件操作

    1. Qt的中IO操作 (1)Qt中IO操作的处理方式 ①Qt通过统一的接口简化了文件和外部设备的操作方式 ②Qt中的文件被看作一种特殊的外部设备 ③Qt中的文件操作与外部设备的操作相同 (2)IO操 ...

  2. LinkedIn的即时消息：在一台机器上支持几十万条长连接

    最近我们介绍了LinkedIn的即时通信,最后提到了分型指标和读回复.为了实现这些功能,我们需要有办法通过长连接来把数据从服务器端推送到手机或网页客户端,而不是许多当代应用所采取的标准的请求-响应模式 ...

  3. OllyUni.dll

    OllyUni.dll 周银辉 好像很多人找不到OllyUni.dll ,下载在这里:http://www.phenoelit.org/win/index.html 注:在OllyDBG2.0中用不了 ...

  4. ubuntu12.04中shell脚本无法使用source的原因及解决方法

    现象: shell脚本中source aaa.sh时提示 source: not found 原因: ls -l `which sh` 提示/bin/sh -> dash 这说明是用dash来进 ...

  5. [[其他教程]] 2015年最新版iOS基础视频_最适合初学者入门

    主讲:孙庆虎类型:iOS 适合对象:初学者入门视频介绍:本视频是iOS学院精心录制的免费精华版iOS语言基础视频,该视频特点在于最大程度保证了知识点的完整性,按知识点进行视频录制,每个视频控制在20分 ...

  6. 6款程序员不得不爱的bootstrap模板

    Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大 部分jQuery插件.Bootstrap中包含了丰富的 ...

  7. JQuery中each()的使用方法说明

    JQuery中each()的使用方法说明 对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说:jQuery提供的eac ...

  8. HTML5之API

    HTML5就是牛,可以直接播放音视频,还可以作图: 一.HTML5中播放视频和音频: 加载时直接播放音频的方式:new Audio("BY2.mp3").play(); <d ...

  9. php特殊用法

    1.将字符串转换成可执行的php代码(简单的代码)--eval() <?php $str="echo phpinfo();"; echo eval( $str);

  10. 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 ...