基于Jquery實現表單驗證

2024-05-06 16:24:20

字體：大中小

來源：轉載

供稿：網友

本文給大家分享的是一段基于Jquery實現表單驗證的代碼，非常簡單實用，感興趣的小伙伴們可以參考下。

有時在我們注冊賬戶、登陸系統時，當所有驗證通過方可提交這就需要Jquery來實現表單驗證，今天分享給小伙伴們一段基于Jquery實現表單驗證的代碼。

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Reg</title>

<style>

.state1{

color:#aaa;

}

.state2{

color:#000;

}

.state3{

color:red;

}

.state4{

color:green;

}

</style>

<script src="jquery.js"></script>

<script>

$(function(){

var ok1=false;

var ok2=false;

var ok3=false;

var ok4=false;

// 驗證用戶名

$('input[name="username"]').focus(function(){

$(this).next().text('用戶名應該為3-20位之間').removeClass('state1').addClass('state2');

}).blur(function(){

if($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=''){

$(this).next().text('輸入成功').removeClass('state1').addClass('state4');

ok1=true;

}else{

$(this).next().text('用戶名應該為3-20位之間').removeClass('state1').addClass('state3');

}

});

//驗證密碼

$('input[name="password"]').focus(function(){

$(this).next().text('密碼應該為6-20位之間').removeClass('state1').addClass('state2');

}).blur(function(){

if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=''){

$(this).next().text('輸入成功').removeClass('state1').addClass('state4');

ok2=true;

}else{

$(this).next().text('密碼應該為6-20位之間').removeClass('state1').addClass('state3');

}

});

//驗證確認密碼

$('input[name="repass"]').focus(function(){

$(this).next().text('輸入的確認密碼要和上面的密碼一致,規則也要相同').removeClass('state1').addClass('state2');

}).blur(function(){

if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!='' && $(this).val() == $('input[name="password"]').val()){

$(this).next().text('輸入成功').removeClass('state1').addClass('state4');

ok3=true;

}else{

$(this).next().text('輸入的確認密碼要和上面的密碼一致,規則也要相同').removeClass('state1').addClass('state3');

}

});

//驗證郵箱

$('input[name="email"]').focus(function(){

$(this).next().text('請輸入正確的EMAIL格式').removeClass('state1').addClass('state2');

}).blur(function(){

if($(this).val().search(//w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*/)==-1){

$(this).next().text('請輸入正確的EMAIL格式').removeClass('state1').addClass('state3');

}else{

$(this).next().text('輸入成功').removeClass('state1').addClass('state4');

ok4=true;

}

});

//提交按鈕,所有驗證通過方可提交

$('.submit').click(function(){

if(ok1 && ok2 && ok3 && ok4){

$('form').submit();

}else{

return false;

}

});

});

</script>

</head>

<body>

<form action='do.php' method='post' >

用戶名:<input type="text" name="username">

<span class='state1'>請輸入用戶名</span><br/><br/>

密　　碼:<input type="password" name="password">

<span class='state1'>請輸入密碼</span><br/><br/>

確認密碼:<input type="password" name="repass">

<span class='state1'>請輸入確認密碼</span><br/><br/>

郵　　箱:<input type="text" name="email">

<span class='state1'>請輸入郵箱</span><br/><br/>

<a href="javascript:;"><img class='submit' type='image' src='./images/reg.gif' /></a>

</form>

</body>

</html>