QQ新用户注册HTML,html用户注册界面
先上一张简约的界面的效果图
这里是style里面的内容
input[type]{
border: 1px solid darkorange;
background: white;
}
#button{
border: 10px solid orange;
width: 200px;
box-shadow:0px 4px 5px #666;
background: orange;
color: white;
}
再来body里面的内容,这里用到的是失焦 onblur 和聚焦 onfocus
用户注册
用户名:">
密码:
确认密码:
邮箱:
我已阅读注册手册
最后是js里面的代码
function name1(){
var name=document.getElementById("name").value;
if(name.length==""){
document.getElementById("tel").innerHTML="用户名不能为空"
document.getElementById("tel").style.color="red";
}else{
document.getElementById("tel").innerHTML="√"
document.getElementById("tel").style.color="green";
}
}
//function name2(){
//document.getElementById("tel").innerHTML="请填写用户名"
//document.getElementById("tel").style.color="#999";
//}
function pwd2(){
document.getElementById("pw").innerHTML="请填写6-12位的密码"
document.getElementById("pw").style.color="#999";
}
function pwd1(){
p=document.getElementById("paswd").value;
if(p.length>=6&&p.length<=20)
{
document.getElementById("pw").innerHTML="√"
document.getElementById("pw").style.color="green";
}else{
document.getElementById("pw").innerHTML="格式错误,请输入6-20位"
document.getElementById("pw").style.color="red";
}
}
function validate(){
var qpw=document.getElementById("paswd").value;
var qpw2=document.getElementById("paswd2").value;
if(qpw==qpw2 && p.length>=6&&p.length<=20){
document.getElementById("qpwtx").innerHTML="√";
document.getElementById("button").disabled = false;
}
else {
document.getElementById("qpwtx").innerHTML="两次密码不相同或者格式错误";
document.getElementById("button").disabled = true;
}
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！