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. java程序设计之反弹高度

    题目:一球从100米高度自由落下,每次落地后反跳回原高度的一半:再落下,求它在第10次落地时,共经过多少米?第10次反弹多高? 代码: public class highe { double high ...

  2. 简单的angular购物车商品小计

    <!DOCTYPE html> <html lang="en" ng-app="shopApp"> <head> <m ...

  3. Struts2：Json插件_Ajax

    lib中加入包 struts2-json-plugin-2.3.20.jar json插件有自己的过滤器.返回类型 WebRoot下新建js文件夹 放入json2.js json2.js是一个著名开源 ...

  4. Mersenne twister 随机数算法实现 in Scheme

    这个实现基本上是从 Wiki 上的 Python 版翻译过来的,大量使用了赋值. ;; Mersenne twister algorithm from Wikipedia ;; returns a c ...

  5. JAVA的垃圾回收机制

    1. 垃圾回收的意义 在C++中,对象所占的内存在程序结束运行之前一直被占用,在明确释放之前不能分配给其它对象:而在Java中,当没有对象引用指向原先分配给某个对象的内存时,该内存便成为垃圾.JVM的 ...

  6. C# 使用网易邮箱发送邮件

    代码如下,值得注意的有一下几点:1.网易要求使用代理密码而不暴露邮箱密码2.要求邮箱开通smtp服务3.要求邮件发送者邮箱和认证的邮箱地址一致. private void SendEmail(stri ...

  7. MySQL架构优化实战系列1：数据类型与索引调优全解析

    一.数据类型优化 数据类型 整数   数字类型:整数和实数 tinyint(8).smallint(16).mediuint(24).int(32).bigint(64) 数字表示对应最大存储位数,如 ...

  8. Asp.Net MVC<八>：View的呈现

    ActionResult 原则上任何类型的响应都可以利用当前的HttpResponse来完成.但是MVC中我们一般将针对请求的响应实现在一个ActionResult对象中. public abstra ...

  9. jsp项目部署

    每新建一个项目都要发布到服务器,也就是项目部署,在tomcat中的  tomcat\Tomcat 6.0\webapps  路径下就会新建你的项目文件夹 webapps是tomcat的默认访问路径,很 ...

  10. 精通Web Analytics 2.0 （7） 第五章：荣耀之钥：度量成功

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第五章:荣耀之钥:度量成功 我们的分析师常常得不到我们应得的喜欢,尊重和资金,因为我们没有充分地衡量一个黄金概念:成果.因为我们 ...