form验证表单 *{ margin:0; padding:0; font-family: "微软雅黑"; font-size:12px; } label{ font-weight: bold; margin-right:20px; text-align:right; } input{ width:300px; height:30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } p{ visibility: hidden; display: block; margin-top:5px; margin-left:50px; color: rgb(220,220,220); font-size:10px; } .box{ margin-bottom: 20px; text-align: center; } .btn{ width:70px; height:30px; background:rgb(45,121,183); color: #fff; text-align: center; line-height: 30px; box-sizing: border-box; border:0; border-radius: 5px; } 名称 必填，长度为4—16个字符
密码 密码不能为空
密码确认 密码不能为空
邮箱 邮箱不能为空
手机 手机号不能为空
提交
<script>// // 1.通过id进行监听，显示验证信息// 2.通过id进行监听，来完成对当前任务订单效验// 3.通过点击btn按钮，来完成所有值的效验，并作出判断，进行falsevar $=function(id){ return document.getElementById(id);};//捕获焦点$("wrap").addEventListener("focus",checkFocus,true);$("wrap").addEventListener("blur",checkBlue,true);$("btn").addEventListener("click",function(){ if(/*所有时间都为true*/){ alert("注册成功"); }else{ alert("注册失败") //提示哪里出问题？ }});function checkFocus(ev){ var e=ev||window.event; var inputs=e.target||e.srcElement; switch (inputs.id){ case "name": $("prompt1").style.visibility="visible"; break; case "pwd": $("prompt2").style.visibility="visible"; break; case "pwd2": $("prompt3").style.visibility="visible"; break; case "email": $("prompt4").style.visibility="visible"; break; default: $("prompt5").style.visibility="visible"; }}function checkBlue(ev){ var e=ev||window.event; var inputs=e.target||e.srcElement; if(inputs.nodeName.toLocaleLowerCase()=="input"){ switch (inputs.id){ case "name": checkName(inputs); break; case "pwd": checkPwd(inputs); break; case "pwd2": checkPwd2(inputs); break; case "email": checkEmail(inputs); break; default: checkPhone(inputs); } }}//效验(node相当于inputs)function checkName(node){ if(!node.value){ $("prompt1").innerHTML ="不能为空"; node.style.borderColor="red"; }else if(checkCount(node.value)16){ $("prompt1").innerHTML ="4-16位之间"; node.style.borderColor="red"; }else{ $("prompt1").innerHTML ="输入正确"; node.style.borderColor="green"; }}//验证4-16位function checkCount(str){ var count=0; for(var i=0;i=0 &&str.charCodeAt() |
微信访问
手机APP
