<!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>
html与js简易的注册页面(附正则匹配)
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 对于一段html文本字符串,如下,如何匹配出其中的资源: 匹配正则表达式写法。 其中脚本匹配需要正则,无法匹配内容...
- 人与人之间的差异究竟在哪里?那些取得巨大成就的人,是比普通人在意志力上更胜一筹吗?为什么在无数鸡汤的补给下,我们的...