<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form验证表单</title>
<style>
*{
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;
}
</style>
</head>
<body>
<form action="#" class="wrap" id="wrap">
<div class="box">
<label for="name">名称</label>
<input type="text" class="name" id="name">
<p class="prompt" id="prompt1">必填，长度为4—16个字符</p>
</div>
<div class="box">
<!--密码-->
<label for="pwd">密码</label>
<input type="text" class="pwd" id="pwd">
<p class="prompt" id="prompt2">密码不能为空</p>
</div>
<div class="box">
<!--重复密码-->
<label for="pwd2">密码确认</label>
<input type="text" class="pwd2" id="pwd2">
<p class="prompt" id="prompt3">密码不能为空</p>
</div>
<div class="box">
<!--邮箱-->
<label for="email">邮箱</label>
<input type="text" class="email" id="email">
<p class="prompt" id="prompt4">邮箱不能为空</p>
</div>
<div class="box">
<!--手机号-->
<label for="phone">手机</label>
<input type="text" class="phone" id="phone">
<p class="prompt" id="prompt5">手机号不能为空</p>
</div>
<div class="box">
<button type="button" class="btn" id="btn">提交</button>
</div>
</form>
</body>
<script>
// <!--获取焦点、失去焦点、点击按钮-->
// 1.通过id进行监听，显示验证信息
// 2.通过id进行监听，来完成对当前任务订单效验
// 3.通过点击btn按钮，来完成所有值的效验，并作出判断，进行false
var $=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)<4 ||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<str.length;i++){
if(str[i].charCodeAt()>=0 &&str[i].charCodeAt()<=128){
count++;
}else{
count +=2;
}
}
return count;
}
//验证密码(1.不能为空、2.正确)
function checkPwd(node){
if(!node.value){
$("prompt2").innerHTML ="不能为空";
node.style.borderColor="red";
}else{
$("prompt2").innerHTML ="输入正确";
node.style.borderColor="green";
}
}
//验证密码2(1.不能为空，2两次不一致3.两次一致)
function checkPwd2(node){
if(!node.value){
$("prompt3").innerHTML ="不能为空";
node.style.borderColor="red";
}else if(node.value == $("pwd").value){
$("prompt3").innerHTML ="两次输入一致";
node.style.borderColor="green";
}else{
$("prompt3").innerHTML ="两次输入不一致";
node.style.borderColor="red";
}
}
function checkEmail(node){
if(!node.value){
$("prompt4").innerHTML ="不能为空";
node.style.borderColor="red";
}else if(!/^[\w\d]+@[\w\d]+(\.[\w]{2,3})+$/.test(value)){
$("prompt4").innerHTML ="格式错误";
node.style.borderColor="red";
}else{
$("prompt4").innerHTML ="正确";
node.style.borderColor="green";
}
}
function checkPhone(node) {
if (!node.value) {
$("prompt5").innerHTML = '手机号码不能为空!';
$("prompt5").style.color = 'red';
node.parentNode.style.border = '2px solid red';
}
else if (/^1[3-9]{2}[\d]{8}/.test(node.value)) {
$("prompt5").innerHTML = '手机号码格式正确!';
node.style.border = '1px solid green';
}
else {
$("prompt5").innerHTML = '手机号码格式不正确!';
node.style.border = '1px solid red';
}
}
</script>
</html>问题1：当点击提交按钮的时候，怎么判断的条件？
问题2：如果判断失败，怎么能显示出提示出的问题？
问题3：label中的重置密码怎么和其他右对齐？
Sxy97
相关分类