js实现登录与注册界面

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

超文本标记语言代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题欢迎你，请先登陆！/title脚本类型=' text/JavaScript ' src=' http :/static/JSP/LX。js '/脚本链接href=' https://max cdn。bootstrapcdn。com/bootstrap/3。3 .7/CSS/bootstrap。量滴CSS ' rel='样式表链接rel='样式表href='./static/CSS/LX。H2登陆/H2 div class=' input _ box ' input id=' uname ' type=' text ' name=' user ' placeholder='请输入用户名/div class=' input _ box ' input id=' upass ' type=' password ' name=' PSW ' placeholder='请输入密码/div div id=' error _ box ' br/div div class=' input _ box '按钮类型='按钮class=' BTN BTN-primary ' onclick=' fnlog in()'登陆/button。 html ' input type=' button ' class=' BTN BTN-info ' name=' regist ' value='注册/a /div/div/body/htmlcss代码：

* { margin : 0；padd : 0；字体系列：微软雅黑；font-size : 12px}.盒子{宽度： 390像素重量： 320像素边框：固体1px # ddd背景： # FFF；绝对位置：左侧： 50%;top:42左边距：-195像素；边距-top :-160 px；文本对齐：中心；}.框H2 {字体粗细：正常；color : # 666 font-size : 16px；线高： 40px飞越：隐藏；文本对齐：中心；边框-底部：实心1px # dddbackground : # f7f 7；}.input _ box { width:350px衬垫-底部： 15pxmargin: 0自动飞越：隐藏；}javascript代码：

函数fnlog in(){ var ou name=document。getelementbyid(' uname ')var ou pass=document。getelementbyid(' up ass ')var oError=document。getelementbyid(' error _ box ')var isError=true；if(Ouname。价值。长度20 | | Ouname。价值。长度6){ or error。innerHTMl='用户名请输入6-20位字符；isError=false返回；} else if((Ouname。价值。charcodeat(0)=48(Ouname)。价值。charcodeat(0)=57)){ or error。innerhtml='首字符必须为字母；返回；} else for(var I=0；借条名称。价值。charcodeat(一)；I){ if((ouname。价值。charcodeat(I)48)| |(ouname。价值。charcodeat(I)57(ouname)。价值。charcodeat(I)97)| |(ouname。价值。charcodeat(I)122)){ oer。innerhtml='必须为字母跟数字组成；返回；} } if(oupass。价值。长度20 | | oupass。价值。长度6){ oer。innerhtml='密码请输入6-20位字符isError=false返回；} window.alert('登录成功')}注册界面超文本标记语言代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题欢迎你，请先登陆！/title脚本类型=' text/JavaScript ' src=' http :/static/JSP/LX。js '/脚本链接href=' https://max cdn。bootstrapcdn。com/bootstrap/3。3 .7/CSS/bootstrap。量滴CSS ' rel='样式表/head dydiv id='容器style=' width : 400 px ' align=' center ' div id=' header ' style='底色：海蓝宝石h2对齐=“中心”注册/H2/div div id=' content ' p align=' center '账号：输入id='uname '类型=“文本”名称=“用户”占位符='账号首字符为字母/p p对齐="中心"密码：输入id='upass '类型='密码'名称='psw '占位符='请输入密码/p div id='error_box'br/div br按钮onclick=' fnlog in()' class=' BTN BTN-信息'注册/button /div div style='底色-颜色：海蓝宝石我版权信息@/i /div/div/body/html运行结果如下：

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