序

一个以射流研究…验证表单的简洁的注册登录页面，不多说直接上图

效果

主要文件

完整代码

一注册_ html注册表单

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title-注册/title link rel='样式表href=' CSS/common _ form。CSS/head body head div class=' head-line '/div/head div class=' content ' img class=' content-logo ' src=' http : img/form _ logo。png ' alt=' logo ' h1 class=' content-title '创建账户/h1 div class='content-form '表单方法=' post ' action=' onsubmit=' return submit test()' div id=' change _ margin _ 1 ' input class=' user ' type=' text ' name=' user ' placeholder='请输入用户名onb lur=' ObRur _ 1()' onfocus=' Ofocus _ 1()'/div！-输入的价值为空时弹出提醒- p id='提醒_ 1 '/p div id=' change _ margin _ 2 ' input class=' password ' type=' password ' name=' password ' placeholder='请输入密码onb lur=' ObRur _ 2()' onfocus=' Ofocus _ 2()'/div！-输入的价值为空时弹出提醒- p id='提醒_ 2 '/p div id=' change _ margin _ 3 ' input class=' content-form-registration ' type=' submit ' value='创建账户/div/form/div class='内容-登录-描述'已经拥有账户？/div diva class=' content-log in-link ' href=' log in _ in。' html '登录/a/div/div脚本src=' http : js/common _ form _ test。js '/script/body/html 2 log in _ in。超文本标记语言登录表单

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title log-in/title link rel='样式表href=' CSS/common _ form。CSS '/header dy header div class=' header-line '/div/header div class=' content ' img class=' content-logo ' src=' http : img/form _ logo。png ' alt=' logo ' h1 class=' content-title '登录/h1 div class='content-form '表单方法=' post ' action=' onsubmit=' return submit test()' div id=' change _ margin _ 1 ' input class=' user ' type=' text ' name=' user ' placeholder='请输入用户名onb lur=' ObRur _ 1()' onfocus=' Ofocus _ 1()'/div！-输入的价值为空时弹出提醒- p id='提醒_ 1 '/p div id=' change _ margin _ 2 ' input class=' password ' type=' password ' name=' password ' placeholder='请输入密码onb lur=' ObRur _ 2()' onfocus=' Ofocus _ 2()'/div！-输入的价值为空时弹出提醒- p id='提醒_ 2 '/p div id=' change _ margin _ 3 ' input class=' content-form-registration ' type=' submit ' value='登录/div/form/div class='内容-登录-描述'没有账户？/div diva class=' content-log in-link ' href=' sign _ up。' html '注册/a/div/div脚本src=' http : js/common _ form _ test。js '/script/body/html 3 common _ form。半铸钢钢性铸铁(Cast Semi-Steel)表单钢性铸铁样式

/*重置样式*/html、body、div、span、applet、object、iframe、h1、h2、h3、h4、h5、h6、p、blockquote、pre、a、缩写，缩写，address，big，cite，code，del，dfn，em，img，ins，kbd，q，s，samp，small，strike，strong，sub，sup，tt，var，b，u，I，dl，dt，dd，ol，ul，li，fieldset，form，label，legend，table，caption，tbody padd : 0 0；border: 0 }正文{ font-family: '微软雅黑；背景： # F4 F4；}/*表头*/。标题行{宽度： 100%；height : 4pxbackground : # 0 dbdd }/*内容*/。内容{宽度： 28%；余量： 70px自动0;文本对齐：中心；}.内容-徽标{ width: 80px高度： 80px}.内容-标题{ margin : 10px 0 25px 0 font-size : 2em；颜色： # 747474字体粗细：正常；}.内容形式{宽度： 100%；padd : 36px 0 20pxborder : 1 px实心# dedede文本对齐：中心；背景# fff}。content-form form div { margin-bottom : 19px；}.内容-形式形式。用户，内容-形式形式。密码{宽度： 77%；height : 20pxpadding : 10px font-size : 1em；border: 1px固体# cccbcbborder-radius : 7px；字母间距1px}。内容表单表单输入input : focus { outline e : none-web kit-box-shadow : 0 5px # 0 bfdd；箱形阴影： 0 5px # 0 bfdd}.内容-形式-注册{宽度： 84%；余量： 0自动添加： 10pxborder: 1px固体# cccbcbborder-radius : 7px；font-size : 1em字体粗细：粗体；color : # fffbackground : # 0 dfbfddcursor :指针；}.内容-表单-注册：悬停{背景： # 0cb 3d 0；}.内容-表单-注册注册：焦点{大纲图：非边框： 1px实心# 0cb3d0}。内容-登录-描述{ margin-top : 25px；线高： 1.63636364;color : # 747474 font-size :91666667雷姆；}.内容-登录-链接{ font-size : 16pxcolor: # 0dbfdd文本装饰：无；}/*输入框无内容便提示*/#提醒_1,#提醒_ 2 {宽度： 76%；margin: 0 auto 2px文本-左对齐：字号：2个em；color : # f00 } 4 common _ form _ test . js注册登录脚本

//全局变量a和b，分别获取用户框和密码框的价值值var a=文档。getelementsbytagname(' input ')[0].价值；var b=文档。getelementsbytagname(' input ')[1].价值；//用户框失去焦点后验证价值值函数ObRur _ 1(){ if(！a) { //用户框价值值为空document.getElementById('提醒_1 ')。innerHTML='请输入用户名!'；文件。getelementbyid(' change _ margin _ 1 ')。风格。marginbottom=1 ' px} else { //用户框价值值不为空document.getElementById('提醒_1 ')。innerHTML=文档。getelementbyid(' change _ margin _ 1 ')。风格。marginbottom=19 ' px}}//密码框失去焦点后验证价值值函数ObRur _ 2(){ if(！b) { //密码框价值值为空document.getElementById('提醒_2 ')。innerHTML='请输入密码!'；文件。getelementbyid(' change _ margin _ 2 ')。风格。marginbottom=1 ' px文件。getelementbyid(' change _ margin _ 3 ')。风格。上边距=2 ' px} else { //密码框价值值不为空document.getElementById('提醒_2 ')。innerHTML=文档。getelementbyid(' change _ margin _ 2 ')。风格。marginbottom=19 ' px文件。getelementbyid(' change _ margin _ 3 ')。风格。上边距=19 ' px}}//用户框获得焦点的隐藏提醒函数ofcus _1(){ document。getelementbyid('提醒_ 1 ')。innerHTML=文档。getelementbyid(' change _ margin _ 1 ')。风格。marginbottom=19 ' px}//密码框获得焦点的隐藏提醒函数ofcus _2(){ document。getelementbyid('提醒_ 2 ')。innerHTML=文档。getelementbyid(' change _ margin _ 2 ')。风格。marginbottom=19 ' px文件。getelementbyid(' change _ margin _ 3 ')。风格。上边距=19 ' px}//若输入框为空，阻止表单的提交函数submitTest() { if(！a！b) { //用户框价值值和密码框价值值都为空document.getElementById('提醒_1 ')。innerHTML='请输入用户名!'；文件。getelementbyid(' change _ margin _ 1 ')。风格。marginbottom=1 ' pxdocument.getElementById('提醒_2 ')。innerHTML='请输入密码!'；文件。getelementbyid(' change _ margin _ 2 ')。风格。marginbottom=1 ' px文件。getelementbyid(' change _ margin _ 3 ')。风格。上边距=2 ' px返回false//只有返回真实的表单才会提交} else if(！a) { //用户框价值值为空document.getElementById('提醒_1 ')。innerHTML='请输入用户名!'；文件。getelementbyid(' change _ margin _ 1 ')。风格。marginbottom=1 ' px返回false} else if(！b) { //密码框价值值为空document.getElementById('提醒_2 ')。innerHTML='请输入密码!'；文件。getelementbyid(' change _ margin _ 2 ')。风格。marginbottom=1 ' px文件。getelementbyid(' change _ margin _ 3 ')。风格。上边距=2 ' px返回false}}5 form_logo.png徽标照片

到这里，一个简单的注册登录页面就完成了，后面会持续更新，使之更强大。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。