<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style type="text/css" >
* {
padding: 0;
margin: 0;
}
body {
background-color: #ccc;
}
.wrapper {
margin: 100px auto;
width: 500px;
padding: 50px;
line-height: 40px;
border: 1px solid #999;
background: #efefef;
}
.wrapper span{
padding-left: 20px;
color: #ccc;
}
.wrapper .codeStrlen {
background: url(images/strong.jpg) ;
width: 220px;
height: 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<label> Q Q <input type="text" name="" id="qq" value=""></label><span>输入正确的QQ号码</span><br/>
<label>手机 <input type="text" name="" value=""></label><span>输入13位手机号码</span><br/>
<label>邮箱 <input type="text" name="" value=""></label><span>输入正确邮箱</span><br/>
<label>座机 <input type="text" name="" value=""></label><span>输入您的座机</span><br/>
<label>账号 <input type="text" name="" value=""></label><span>亲输入您的账号,6个以上,前英后数,</span><br/>
<label>密码 <input type="password" name="" value=""></label><span>请输入您的密码</span>
<div class="codeStrlen">
</div>
</div>
<script type="text/javascript">
$(function(){
function fun(id,fun){
$(id).blur(fun);
}
fun("input:eq(0)",function(){
var num = /^[1-9]\d{4,10}$/;
if(num.test($("#qq").val())){
$("span:eq(0)").html("666").css({"color":"green","background":"url(images/right.png) no-repeat"});
} else{
$("span:eq(0)").html("见鬼去吧").css({"color":"red","background":"url(images/error.png) no-repeat"});
}
});
fun("input:eq(1)",function(){
var num = /^(13[0-9]|14[57]|15[0-9]|18[0-9])\d{8}$/;
if(num.test($("input:eq(1)").val())){
$("span:eq(1)").html("666").css({"color":"green","background":"url(images/right.png) no-repeat"});
} else{
$("span:eq(1)").html("见鬼去吧").css({"color":"red","background":"url(images/error.png) no-repeat"});
}
});
fun("input:eq(2)",function(){
var num = /^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(num.test($("input:eq(2)").val())){
$("span:eq(2)").html("666").css({"color":"green","background":"url(images/right.png) no-repeat"});
} else{
$("span:eq(2)").html("见鬼去吧").css({"color":"red","background":"url(images/error.png) no-repeat"});
}
});
fun("input:eq(3)",function(){
var num = /^0\d{2,3}-\d{7,8}$/;
if(num.test($("input:eq(3)").val())){
$("span:eq(3)").html("666").css({"color":"green","background":"url(images/right.png) no-repeat"});
} else{
$("span:eq(3)").html("见鬼去吧").css({"color":"red","background":"url(images/error.png) no-repeat"});
}
});
fun("input:eq(4)",function(){
var num = /[a-zA-Z]{1,}[0-9]{1,}/; ;
if(num.test($("input:eq(4)").val()) && $("input:eq(4)").val().length>6){
$("span:eq(4)").html("666").css({"color":"green","background":"url(images/right.png) no-repeat"});
} else{
$("span:eq(4)").html("见鬼去吧").css({"color":"red","background":"url(images/error.png) no-repeat"});
}
});
var level =0;
var arr=["url(images/strong.jpg) no-repeat 0px 0px","url(images/strong.jpg) no-repeat 0px -20px","url(images/strong.jpg) no-repeat 0px -40px","url(images/strong.jpg) no-repeat 0px -60px"];
$("input:eq(5)").keyup(function(){
level=0;
var txt=/[0-9]/.test($("input:eq(5)").val());
if(txt){
level++;
}
if(/[a-zA-Z]/.test($("input:eq(5)").val())){
level++;
}
if(/\W/.test($("input:eq(5)").val())){
level++;
}
$("span:eq(5)").html("666").css({"color":"green","background":"url(images/right.png) no-repeat"});
if($("input:eq(5)").val().length<6){
level=0;
$("span:eq(5)").html("见鬼去吧").css({"color":"red","background":"url(images/error.png) no-repeat"});
}
$("div:eq(1)").css("background",arr[level]);
});
});
</script>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-666607.html
