頁面效果圖:
在這裏最難的地方就是當郵箱已經存在的時候下拉框的彈出，我這裏簡單說一下我的做法。----(數據和展示分離)
1.因爲在做這個之前做過一個光標在輸入框時會出現一個下拉框。所以我還是按照那種做法 ----把下拉框先做出來，但是和那個不同的是沒有對應的屬性值(可以參考當出現與規則不一樣的情況下的span)所以我先做了三個空的div模塊，每個div模塊後有一個span
<!--在郵箱下面添加DIV模塊 裏面有三個元素-->
<div id="emaildiv" style="display: none;">
<div id="d1"><span id="s1"></span></div>
<div id="d2"><span id="s2"></span></div>
<div id="d3"><span id="s3"></span></div>
</div>
2.當這裏預留出來後，就是檢測郵箱是否和已有的相同。如果相同後，則需要給這裏的span賦值新的值(和錯誤提示相似)
//檢查email是否正確
$("#useremail").change(function(){
//正則表達式
var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
if (!reg.test(useremail.val())) {
$("#span5").html("<font color='red'>郵箱輸入有誤</font>");
errormessage+="郵箱輸入有誤"
check=0;
}
else{
$("#span5").html("");
check+=1;
for(var j=0;j<email.length;j++){
//判斷輸入的email和數組裏的是否有相同的
if(useremail.val()==email[j]){
check-=1;
//截取@之前的子串和@(包含)之後的子串
ch1=useremail.val().substring(0,useremail.val().indexOf('@'));
ch2=useremail.val().substring(useremail.val().indexOf('@'),useremail.val().length);
$("#span5").html("<font color='red'>郵箱已存在(請重新輸入或選擇爲您提供的賬號)</font>");
//提供錯誤提示(所有出現的errormessage的都與提交有關可以不用考慮了)
errormessage+="郵箱已存在";
$("#emaildiv").show();
//給下拉框賦值 這裏就是和錯誤提示一樣的做法，但是是在兩個子串中間添加_num
$("#s1").html("<font>"+ch1+"_1"+ch2+"</font><br/>");
$("#s2").html("<font>"+ch1+"_2"+ch2+"</font><br/>");
$("#s3").html("<font>"+ch1+"_3"+ch2+"</font><br/>");
break;
}
}
}
});
3.這裏只是讓之前預留出來的下拉框可以顯示對應的文字，因爲在開始我們說過我們是通過數據和顯示分離。上一步只是做了一個顯示，在接下來我們需要實現數據的替換。在之前我們已經給div模塊給了一個id，因爲JQuery對象只能操作已存在或已經是JQuery的對象。因爲便於理解我們選擇前者
接下來就是給每個id設置對應的事件
$("#d1").click(function(){
//給html賦值
html+=ch1+"_1"+ch2;
//修改email輸入框的值
$("#useremail").val(html);
//下拉框隱藏
$("#emaildiv").hide();
//將錯誤提示取消
$("#span5").html("");
check+=1;
});
我這裏再解釋一下這裏是如何實現的。首先html是一個空的字符串。在這個空的字符串加上一個新的字符串就實現了一個字符串。隨後只需要將val("elem")的elem替換成html即可實現輸入框的替換。接下來所有的檢測都實現了。
下面是源碼。本界面實現了提交按鈕，當檢測信息不全部滿足時會提示錯誤否則會輸出你的賬號信息
<!DOCTYPE html>
<html>
<!--
作者：[email protected]
時間：2019-09-12
描述：實現了一個註冊頁面
利用JQuery進行賬戶長度判斷，密碼長度判斷，二次密碼驗證，手機格式判斷以及郵箱格式判斷
當輸入錯誤後會在對話框後提示對應的錯誤信息；
本功能難點爲當輸入的郵箱和數據庫中已存在的相同時會提示一個下拉框顯示類似的郵箱進行選擇
本界面引入了一些簡單的算法思想，所以看不懂也是很正常的
-->
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://static.runoob.com/assets/jquery/jquery.growl/javascripts/jquery.growl.js" type="text/javascript"></script>
<link href="https://static.runoob.com/assets/jquery/jquery.growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function(){
//獲得輸入的內容
var username=$("#username");
var userpwd=$("#userpwd");
var surepwd=$("#surepwd");
var userphone=$("#userphone");
var useremail=$("#useremail");
//設置郵箱數組
var email=["[email protected]","[email protected]"];
//設置檢查點，條件不符時檢查點爲0 當條件符合時檢查點爲1 只有當所有條件都符合時最後才爲1
var check=0;
//設置提示信息
var errormessage="";
var ch1="";
var ch2="";
var html="";
//提交按鈕的點擊事件
$(".notice").click(function(event){
event.preventDefault();
event.stopPropagation();
//設置一個空字符串 用來給輸入框初始化
var emp="";
//將輸入框的值給其他變量用來輸出
var un=username.val();
var up=userpwd.val();
var uph=userphone.val();
var ue=useremail.val();
//給輸入框初始化
username.val(emp);
userpwd.val(emp);
surepwd.val(emp)
userphone.val(emp);
useremail.val(emp);
//當所有的檢查點都滿足條件時 check=5
if(check==5){
return $.growl.notice({
title: "提交成功",
//提示賬號密碼
message: "賬戶:"+un+"密碼:"+up+"\n手機號:"+uph+"\n郵箱"+ue
});
}else{
//否則爲0
return $.growl.error({
title: "提交失敗",
//提示錯誤信息
message: errormessage
});
}
});
//賬號的判斷 長度 6-8
$("#username").change(function(){
if(username.val().length<6||username.val().length>8){
//給span添加錯誤提示
$("#span1").html("<font color='red'>賬號長度在6-8</font>");
errormessage+="賬號長度錯誤;"
check-=1
}else{
//將錯誤提示取消
$("#span1").html("");
check+=1;
}
});
//密碼的判斷 長度5-18
$("#userpwd").change(function(){
if(userpwd.val().length<5||userpwd.val().length>18){
$("#span2").html("<font color='red'>密碼長度在5-18</font>");
errormessage+="密碼長度錯誤;"
check-=1
}else{
$("#span2").html("");
check+=1;
}
});
//判斷二次密碼是否正確
$("#surepwd").change(function(){
if(userpwd.val()!=surepwd.val()){
$("#span3").html("<font color='red'>兩次密碼錯誤</font>");
errormessage+="第二次密碼輸入有誤;"
check-=1
}else{
$("#span3").html("");
check+=1;
}
});
//檢查手機號是否正確
$("#userphone").change(function(){
if(userphone.val().length!=11){
$("#span4").html("<font color='red'>手機號輸入有誤</font>");
errormessage+="手機號輸入有誤;"
check-=1
}else{
$("#span4").html("");
check+=1;
}
});
//下拉框文字的點擊事件
$("#d1").click(function(){
//給html賦值
html+=ch1+"_1"+ch2;
//修改email輸入框的值
$("#useremail").val(html);
//下拉框隱藏
$("#emaildiv").hide();
//將錯誤提示取消
$("#span5").html("");
check+=1;
});
$("#d2").click(function(){
html+=ch1+"_2"+ch2;
$("#useremail").val(html);
$("#emaildiv").hide();
$("#span5").html("");
check+=1;
});
$("#d3").click(function(){
html+=ch1+"_3"+ch2;
$("#useremail").val(html);
$("#emaildiv").hide();
$("#span5").html("");
check+=1;
});
//檢查email是否正確
$("#useremail").change(function(){
//正則表達式
var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
if (!reg.test(useremail.val())) {
$("#span5").html("<font color='red'>郵箱輸入有誤</font>");
errormessage+="郵箱輸入有誤"
check-=1;
}
else{
$("#span5").html("");
check+=1;
for(var j=0;j<email.length;j++){
//判斷輸入的email和數組裏的是否有相同的
if(useremail.val()==email[j]){
check-=1;
//截取@之前的子串和@(包含)之後的子串
ch1=useremail.val().substring(0,useremail.val().indexOf('@'));
ch2=useremail.val().substring(useremail.val().indexOf('@'),useremail.val().length);
$("#span5").html("<font color='red'>郵箱已存在(請重新輸入或選擇爲您提供的賬號)</font>");
//提供錯誤提示(所有出現的errormessage的都與提交有關可以不用考慮了)
errormessage+="郵箱已存在";
$("#emaildiv").show();
//給下拉框賦值 這裏就是和錯誤提示一樣的做法，但是是在兩個子串中間添加_num
$("#s1").html("<font>"+ch1+"_1"+ch2+"</font><br/>");
$("#s2").html("<font>"+ch1+"_2"+ch2+"</font><br/>");
$("#s3").html("<font>"+ch1+"_3"+ch2+"</font><br/>");
break;
}
}
}
});
})
</script>
</head>
<body>
<div id="div1">
<!--設置界面-->
<div id="">
賬號:
<input type="text" name="username" id="username" /><span id="span1"></span>
</div>
<div id="">
密碼:
<input type="password" name="userpwd" id="userpwd" /><span id="span2"></span>
</div>
<div id="">
確密:
<input type="password" name="surepwd" id="surepwd" /><span id="span3"></span>
</div>
<div id="">
手機:
<input type="text" name="userphone" id="userphone" /><span id="span4"></span>
</div>
<div id="">
郵箱:
<input type="text" name="useremail" id="useremail" /><span id="span5"></span>
<br />
<!--在郵箱下面添加DIV模塊 裏面有三個元素-->
<div id="emaildiv" style="display: none;">
<div id="d1"><span id="s1"></span></div>
<div id="d2"><span id="s2"></span></div>
<div id="d3"><span id="s3"></span></div>
</div>
<div>
<input type="button" class="notice" name="submit id="submit" value="提交" />
</div>
</div>
</div>
</body>
</html>