<!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">
????????????<!--重復(fù)密碼-->
?<label?for="pwd2">密碼確認(rèn)</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進行監(jiān)聽，顯示驗證信息
//????2.通過id進行監(jiān)聽，來完成對當(dāng)前任務(wù)訂單效驗
//????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相當(dāng)于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：當(dāng)點擊提交按鈕的時候，怎么判斷的條件？問題2：如果判斷失敗，怎么能顯示出提示出的問題？問題3：label中的重置密碼怎么和其他右對齊？
有三個問題在最底下
19990000
2017-10-08 18:05:43
