首页手记 jquery表单验证再提交

jquery表单验证再提交

标签：

Html/CSS JQuery

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<title>name</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.min.js" ></script>
<link type="text/css" rel="styleSheet" href="css/style.css"/>
</head>
<style>
.phone_k,.name_k{
position:relative;
margin:0 auto;
border: 0;
text-align: center;
border-radius: 0.5rem;
height: 0.65rem;
width: 4.5rem;
margin-bottom: 0.1rem;}
.lable_gs{
position:absolute;
border: 0;
right:0;
top:0;
text-align: left;
border-radius: 0.5rem;
height: 0.65rem;
width: 0.6rem;
line-height:0.65rem;
font-size: 0.4rem;
font-weight: bold;
}
.red{color:#F00;}
.green{color:#0aa770;}
</style>
<body>
<form action="/plus/diy.php" enctype="multipart/form-data" method="post" action="demo_form.asp">
<input type="hidden" name="action" value="post" />
<input type="hidden" name="diyid" value="1" />
<input type="hidden" name="do" value="2" />

<div class="name_k">
    <input type='text' name='name' id='name' value="" placeholder="你的姓名" required>
    <div class="lable_gs" id ="label0"></div>
</div>
<div class="phone_k">
    <input type='text' name='phone' id='phone' value="" placeholder="你的电话" required>
    <div class="lable_gs" id ="label1"></div>
</div>

<input type="submit" name="submit" value="立即美眼" class='coolbg' />

<input type="reset" name="reset" value="重置" class='coolbg' />
</form>
<script>
$(function(){

var ok1=false;
var ok2=false;
// 验证用户名
$('input[name="name"]').focus(function(){
    $("#label0").text('×').removeClass('green').addClass('red');
}).blur(function(){
    if($(this).val().length >= 2 && $(this).val().length <=12 && $(this).val()!=''){
        $("#label0").text('√').removeClass('red').addClass('green');
        ok1=true;
    }else{
        $("#label0").text('×').removeClass('green').addClass('red');
    }

});
//验证电话
$('input[name="phone"]').focus(function(){
    $("#label1").text('×').removeClass('green').addClass('red');
}).blur(function(){
    if($(this).val().search(/^1[3|4|5|7|8]\d{9}$/)){
        $("#label1").text('×').removeClass('green').addClass('red');
    }else{                  
        $("#label1").text('√').removeClass('red').addClass('green');
        ok2=true;
    }

});

//提交按钮,所有验证通过方可提交

$('input[name="submit"]').click(function(){
    if(ok1 && ok2){
        $('form').submit();
    }else{
        alert("您填写的姓名或电话不正确请重新填写！");
        return false;
    }
});

});
</script>
</body>
</html>

点击查看更多内容