html与js简易的注册页面(附正则匹配)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>Document</title>

<style>

body {

margin: 0;

padding: 0;

}

div {

margin: 0 auto;

text-align: center;

}

#d1 a{

text-decoration: none;

color: blue;

}

#d2 {

display: none;

width: 300px;

height: 120px;

border: 1px solid #ccc;

}

p {

margin: 0 auto;

text-align: center;

}

</style>

</head>

<body>

<div id="d1">您好，请加入我们

<a href="#" id="a1">注册</a>

</div>

<div id="d2">

<pre>

用 户 名：<input type='text' id="in1">

密 码：<input type='text' id="in2">

确认密码：<input type='text' id="in3">

<button id="btn1">提交</button> <button id="btn2">重置</button>

</pre>

</div>

<p id="check"></p>

</body>

<script>

var oDiv1=document.getElementById('d1');

var oA1=document.getElementById('a1')

var oDiv2=document.getElementById('d2');

var oInput1=document.getElementById('in1');

var oInput2=document.getElementById('in2');

var oInput3=document.getElementById('in3');

var oCheck=document.getElementById('check');

var oBtn1=document.getElementById('btn1');

var oBtn2=document.getElementById('btn2');

oA1.onclick=function(){

oDiv2.style.display='block';

}

oInput1.onkeyup=function(){

var val=oInput1.value;

var re=/^[a-z]\w{6,12}$/g;

var set=val.match(re);

if(set){

oCheck.style.color='blue';

oCheck.innerHTML='用户名正确';

}else{

oCheck.style.color='red';

oCheck.innerHTML='用户名错误,请输入7-13位用户名，开头字母大写不能为数字，用户名可以包括数字字母下划线';

}

}

oInput2.onkeyup=function(){

var val=oInput2.value;

var re=/^[A-Z]\w{7,19}$/g;

var set=val.match(re);

if(set){

oCheck.style.color='blue';

oCheck.innerHTML='密码可用';

}else{

oCheck.style.color='red';

oCheck.innerHTML='密码错误，请输入以大写字母开头的8-20位的密码';

}

}

oInput3.onkeyup=function(){

var val=oInput3.value;

if(val==oInput2.value){

oCheck.style.color='blue';

oCheck.innerHTML='密码正确';

}else{

oCheck.style.color='red';

oCheck.innerHTML='两次密码不相同，请重新输入';

}

}

oBtn1.onclick=function(){

if(oCheck.style.color='blue'){

alert('注册成功');

}else{

oBtn1.disabled=true;

}

}

oBtn2.onclick=function(){

oInput1.value=null;

oInput2.value=null;

oInput3.value=null;

}

</script>

</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容