完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括:
用户名6-12位
首字母不能是数字
只能包含字母和数字
密码6-12位
注册页两次密码是否一致
html代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >欢迎你,请先登陆!</ title > < script type = "text/javascript" src = "../static/jsp/lx.js" ></ script > < link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel = "stylesheet" > < link rel = "stylesheet" href = "../static/css/lx.css" > </ head > < body > < div class = "box" > < h2 >登陆</ h2 > < div class = "input_box" > < input id = "uname" type = "text" name = "user" placeholder = "请输入用户名" > </ div > < div class = "input_box" > < input id = "upass" type = "password" name = "psw" placeholder = "请输入密码" > </ div > < div id = "error_box" >< br ></ div > < div class = "input_box" > < button type = "button" class = "btn btn-primary" onclick = "fnLogin()" >登陆</ button >     < a href = "regist.html" >< input type = "button" class = "btn btn-info" name = "regist" value = "注册" ></ a > </ div > </ div > </ body > </ html > |
css代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | *{ margin : 0 ; padding : 0 ; font-family : 微软雅黑; font-size : 12px ; } .box{ width : 390px ; height : 320px ; border : solid 1px #ddd ; background : #FFF ; position : absolute ; left : 50% ; top : 42% ; margin-left : -195px ; margin-top : -160px ; text-align : center ; } .box h 2 { font-weight : normal ; color : #666 ; font-size : 16px ; line-height : 40px ; overflow : hidden ; text-align : center ; border-bottom : solid 1px #ddd ; background : #f7f7f7 ; } .input_box{ width : 350px ; padding-bottom : 15px ; margin : 0 auto ; overflow : hidden ; } |
javascript代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | function fnLogin() { var oUname = document.getElementById( "uname" ) var oUpass = document.getElementById( "upass" ) var oError = document.getElementById( "error_box" ) var isError = true ; if (oUname.value.length > 20 || oUname.value.length < 6) { oError.innerHTML = "用户名请输入6-20位字符" ; isError = false ; return ; } else if ((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){ oError.innerHTML = "首字符必须为字母" ; return ; } else for ( var i=0;i<oUname.value.charCodeAt(i);i++){ if ((oUname.value.charCodeAt(i)<48)||(oUname.value.charCodeAt(i)>57) && (oUname.value.charCodeAt(i)<97)||(oUname.value.charCodeAt(i)>122)){ oError.innerHTML = "必须为字母跟数字组成" ; return ; } } if (oUpass.value.length > 20 || oUpass.value.length < 6) { oError.innerHTML = "密码请输入6-20位字符" isError = false ; return ; } window.alert( "登录成功" ) } |
注册界面html代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >欢迎你,请先登陆!</ title > < script type = "text/javascript" src = "../static/jsp/lx.js" ></ script > < link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel = "stylesheet" > </ head > < body > < div id = "container" style = "width: 400px" align = "center" > < div id = "header" style = "background-color: aquamarine" > < h2 align = "center" >注册</ h2 > </ div > < div id = "content" > < p align = "center" >账号: < input id = "uname" type = "text" name = "user" placeholder = "账号首字符为字母" > </ p > < p align = "center" >密码: < input id = "upass" type = "password" name = "psw" placeholder = "请输入密码" > </ p > < div id = "error_box" >< br ></ div > < br > < button onclick = "fnLogin()" class = "btn btn-info" >注册</ button > </ div > < div style = "background-color: aquamarine" > < i >版权信息@</ i > </ div > </ div > </ body > </ html > |
运行结果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
联系客服