<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
</style>
</head>
<body>
<center>
<form action="success.html" method="get" οnsubmit="return check()">
<table>
<tr><td>姓名：</td><td><input type="text" id="uname"/></td><td><span id="sname"></span></td></tr>
<tr><td>郵箱：</td><td><input type="text" id="uemail"/></td><td><span id="semail"></span></td></tr>
<tr><td colspan="3"><input type="submit" value="提交"/></td></tr>
</table>
</form>
<script type="text/javascript">
function check(){
var nametip=$("#sname").html();
var emailtip=$("#semail").html();
if(nametip=="✔" && emailtip=="✔"){
return true;
}else{
return false;
}
}
//頁面初使化事件
$(function(){
$("#uname").focus(function(){
//獲得焦點時，改變邊框的顏色
$(this).css("border","1px solid yellow").css("outline","none");
});
//失去焦點事件blur
$("#uname").blur(function(){
$(this).css("border","1px solid gray");
//獲取輸入的內容
var v=$(this).val();
if(v.length<3){//不合法
$("#sname").html("用戶名長度必須大於等於3位！");
$("#sname").css("color","red");//將提示文字顯示成紅色
}else{
$("#sname").html("✔");
$("#sname").css("color","green");
}
});
$("#uemail").blur(function(){
var email=$(this).val();
//判斷字符串有沒有@符號
var i=email.indexOf("@");
if(i==-1){//代表字符串中 不存在 @ 符號
$("#semail").html("<b>郵箱中必須包含@字符！</b>");
$("#semail").css("color","red");//將提示文字顯示成紅色
// $("#semail").css("font-weight","bold");//加粗
}else{
$("#semail").html("✔");
$("#semail").css("color","green");
}
});
});
</script>
</center>
</style>
</head>
<body>
<center>
<form action="success.html" method="get" οnsubmit="return check()">
<table>
<tr><td>姓名：</td><td><input type="text" id="uname"/></td><td><span id="sname"></span></td></tr>
<tr><td>郵箱：</td><td><input type="text" id="uemail"/></td><td><span id="semail"></span></td></tr>
<tr><td colspan="3"><input type="submit" value="提交"/></td></tr>
</table>
</form>
<script type="text/javascript">
function check(){
var nametip=$("#sname").html();
var emailtip=$("#semail").html();
if(nametip=="✔" && emailtip=="✔"){
return true;
}else{
return false;
}
}
//頁面初使化事件
$(function(){
$("#uname").focus(function(){
//獲得焦點時，改變邊框的顏色
$(this).css("border","1px solid yellow").css("outline","none");
});
//失去焦點事件blur
$("#uname").blur(function(){
$(this).css("border","1px solid gray");
//獲取輸入的內容
var v=$(this).val();
if(v.length<3){//不合法
$("#sname").html("用戶名長度必須大於等於3位！");
$("#sname").css("color","red");//將提示文字顯示成紅色
}else{
$("#sname").html("✔");
$("#sname").css("color","green");
}
});
$("#uemail").blur(function(){
var email=$(this).val();
//判斷字符串有沒有@符號
var i=email.indexOf("@");
if(i==-1){//代表字符串中 不存在 @ 符號
$("#semail").html("<b>郵箱中必須包含@字符！</b>");
$("#semail").css("color","red");//將提示文字顯示成紅色
// $("#semail").css("font-weight","bold");//加粗
}else{
$("#semail").html("✔");
$("#semail").css("color","green");
}
});
});
</script>
</center>