<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
//判斷用戶名
$("#in1").blur(function(){
//$("span").html("aa");
var in1 = $("#in1");
if(in1.val().length < 3){
$("#sp1").css("color","red");
$("#sp1").html("用戶名輸入不正確");
$("#in1").css("border-color","red");
return;
}else{
$("#sp1").css("color","green");
$("#sp1").html("√");
$("#in1").css("border-color","green");
}
}).focus(function(){//點到輸入框的時候就提醒
$(this).triggerHandler("blur");//觸發blur事件
}).keyup(function(){//輸入的時候進行提醒
$(this).triggerHandler("blur");//觸發blur事件
});
//判斷郵箱
$("#in2").blur(function(){
var in2 = $("#in2");
var shu=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;//正則
//var ss = /@/;
// if(!/.+@.+\.[a-zA-Z]{2,4}$/.test($.trim(this.value))){
// $("#sp2").html("郵箱輸入不正確");
// $("#sp2").css("color","red");
// return;
// }else{
// $("#sp2").html("√");
// $("#sp2").css("color","green");
// }
if(!in2.val().match(shu)){//判斷是否加入 @ 符號
$("#sp2").html("郵箱輸入不正確");
$("#sp2").css("color","red");
$("#in2").css("border-color","red");
return;
}else{
$("#sp2").html("√");
$("#sp2").css("color","green");
$("#in2").css("border-color","green");
}
}).focus(function(){//點到輸入框的時候就提醒
$(this).triggerHandler("blur");//觸發blur事件
}).keyup(function(){//輸入的時候進行提醒
$(this).triggerHandler("blur");//觸發blur事件
});
//判斷手機號
$("#in3").blur(function(){
var in3 = $("#in3");
if(in3.val().length != 11){//長度必須爲11位
$("#sp3").html("郵箱輸入不正確");
$("#sp3").css("color","red");
$("#in3").css("border-color","red");
return;
}else{
$("#sp3").html("√");
$("#sp3").css("color","green");
$("#in3").css("border-color","green");
}
}).focus(function(){//點到輸入框的時候就提醒
$(this).triggerHandler("blur");//觸發blur事件
}).keyup(function(){//輸入的時候進行提醒
$(this).triggerHandler("blur");//觸發blur事件
});
//判斷身份證號
$("#in4").blur(function(){
var in4 = $("#in4");
if(in4.val().length != 18){//長度必須爲18位
$("#sp4").html("郵箱輸入不正確");
$("#sp4").css("color","red");
$("#in4").css("border-color","red");
return;
}else{
$("#sp4").html("√");
$("#sp4").css("color","green");
$("#in4").css("border-color","green");
}
}).focus(function(){//點到輸入框的時候就提醒
$(this).triggerHandler("blur");//觸發blur事件
}).keyup(function(){//輸入的時候進行提醒
$(this).triggerHandler("blur");//觸發blur事件
});
});
</script>
</head>
<body>
<div class="d1">
姓名：<input id="in1"/><span style="margin-left: 5px;" id="sp1"></span><br />
Email地址：<input type="email" id="in2"/><span style="margin-left: 5px;" id="sp2"></span><br />
手機號：<input type="number" id="in3"/><span style="margin-left: 5px;" id="sp3"></span><br />
身份證號：<input id="in4"/><span style="margin-left: 5px;" id="sp4"></span><br />
<input type="submit" value="提交" id="in5"/><br />
</div>
</body>
焦點事件/用戶註冊
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章