基于jquery實現(xiàn)智能表單驗證操作
更新時間：2016年05月09日 17:22:27 投稿：lijiao
這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)智能表單驗證操作的相關資料，利用jquery實現(xiàn)了對一個表單字段格式的即時檢查，感興趣的小伙伴們可以參考一下
很多網站的注冊模塊都可以實現(xiàn)即時檢查格式是否正確，這樣極大的增強了用戶體驗，對開發(fā)非常有利。
先給大家展示下表單效果圖，具體效果如下所示：
1.前臺一開始用JQuery實現(xiàn)，先來上HTML標記:
<body> <form id="form1" runat="server"> <table class="tble"> <tr><td class="td1">用戶名 <input type="text" class="td" /></td></tr> <tr><td class="td2">密碼 <input type="text" class="td"/></td></tr> <tr><td class="td3">郵箱 <input type="text" class="td" /></td></tr> <tr><td class="td4">確認密碼 <input type="text" class="td" /></td></tr> <tr><td><input class="btton1" type="button" value="提交" /></td><td><input class="btton2" type="reset" value="重置" /></td></tr> </table> </form> </body>
2,是CSS代碼:
<style type="text/css">
.tble
{
font-size:14px;
text-align:right;
position:absolute;
left:550px;
top:150px;
}
.td
{
border:2px #CCCCCC solid;
}
.btton1
{
position:absolute;
left:65px;
}
.btton2
{
position:absolute;
left:110px;
}
.span
{
color:#cccccc;
font-size:14px;
text-align:right;
}
.spanPwd2
{
color:Red;
}
.spanPwd3
{
color:Red;
}
.spanPwd4
{
color:Red;
}
.spanPwd5
{
color:Green;
}
.spanPwd6
{
color:Red;
}
</style>
3.編寫JQUery代碼前需要引入JQuery支持文件:
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
4.現(xiàn)在開始編寫JQuery代碼:
<script type="text/javascript">
$(function () {
GetStyle();
GetPassword();
GetEmail();
function GetStyle() {
$("input.td").focus(function () {
//===================密碼樣式處理===================================
$(this).css("border", "2px #00ccff solid");
var span = "<td class='span'><span>請輸入密碼</span></td>";
$(this).parent().parent().find("td.td2").after(span);
$(this).parent().parent().find("td.spanPwd2").remove();
$(this).parent().parent().find("td.spanPwd3").remove();
$(this).parent().parent().find("td.spanPwd4").remove();
$(this).parent().parent().find("td.spanPwd5").remove();
//==================================================================
//================郵箱樣式處理==============================
$(this).css("border", "2px #00ccff solid");
var spanEmail = "<td class='span'><span>請輸入正確郵箱地址</span></td>";
$(this).parent().parent().find("td.td3").after(spanEmail);
$(this).parent().parent().find("td.spanPwd6").remove();
$(this).parent().parent().find("td.spanPwd5").remove();
//===================用戶名樣式處理========================
$(this).css("border", "2px #00ccff solid");
var spanEmail = "<td class='span'><span>請輸入正確用戶名</span></td>";
$(this).parent().parent().find("td.td1").after(spanEmail);
$(this).parent().parent().find("td.spanPwd6").remove();
$(this).parent().parent().find("td.spanPwd5").remove();
})
}
//================確認密碼的驗證================================
//非空驗證
//確認密碼與原密碼一致性的驗證
function GetPassword() {
$("input.td").blur(function () {
//================密碼驗證=================================
//非空驗證
if ($(this).val() == "") {
$(this).css("border", "2px red solid");
$(this).parent().parent().find("td.span").remove();
var span = "<td class='spanPwd2'><span>密碼不能為空!</span></td>";
$(this).parent().parent().find("td.td2").after(span);
return false;
}
//密碼長度的驗證
else if ($(this).val().length < 6 || $(this).val().length > 12) {
$(this).css("border", "2px red solid");
$(this).parent().parent().find("td.span").remove();
var span = "<td class='spanPwd3'><span>密碼長度必須為6位到12位之間!</span></td>";
$(this).parent().parent().find("td.td2").after(span);
return false;
}
//如果密碼不為數(shù)字
else if (isNaN($(this).val()) == true) {
$(this).css("border", "2px red solid");
$(this).parent().parent().find("td.span").remove();
var span = "<td class='spanPwd4'><span>密碼必須為數(shù)字!</span></td>";
$(this).parent().parent().find("td.td2").after(span);
return false;
}
else {
//密碼格式通過
$(this).css("border", "2px #cccccc solid");
$(this).parent().parent().find("td.span").remove();
var span = "<td class='spanPwd5'><span>密碼格式通過!</span></td>";
$(this).parent().parent().find("td.td2").after(span);
return true;
}
});
}
//=====================郵箱驗證開始========================
function GetEmail() {
$(".td3 input").blur(function () {
var patten = new RegExp(/^[w-]+(.[w-]+)*@([w-]+.)+[a-zA-Z]+$/);
//非空驗證
if ($(".td3 input").val() == "") {
$(this).css("border", "2px red solid");
$(this).parent().parent().find("td.span").remove();
var spanxEmail = "<td class='spanPwd6'><span>郵箱不能為空!</span></td>";
$(this).parent().parent().find("td.td3").after(spanxEmail);
return false;
}
//郵箱格式驗證
else if (patten.test($(".td3 input").val()) == false) {
$(this).css("border", "2px red solid");
$(this).parent().parent().find("td.span").remove();
var span = "<td class='spanPwd4'><span>郵箱格式不正確，請重新填寫 !</span></td>";
$(this).parent().parent().find("td.td3").after(span);
return false;
} else {
//郵箱格式通過
$(this).css("border", "2px #cccccc solid");
$(this).parent().parent().find("td.span").remove();
var spanEmail = "<td class='spanPwd5'><span>郵箱格式通過!</span></td>";
$(this).parent().parent().find("td.td3").after(spanEmail);
return true;
}
});
}
//==========================郵箱驗證結束============================
//================用戶名驗證=================================
function GetUserName() {
$(".td1 input").blur(function () {
//非空驗證
if ($(this).val == "") {
$(this).css("border", "2px red solid");
$(this).parent().parent().find("td.span").remove();
var span = "<td class='spanPwd6'><span>用戶名郵箱不能為空!</span></td>";
$(this).parent().parent().find("td.td1").after(span);
return false;
}
//用戶名長度的驗證
else if ($(this).length < 4 || $(this).length > 20) {
$(this).css("border", "2px red solid");
$(this).parent().parent().find("td.span").remove();
var spanxEmail = "<td class='spanPwd6'><span>用戶名格式不對，只能輸入4-20字符!</span></td>";
$(this).parent().parent().find("td.td1").after(spanxEmail);
return false;
}
//用戶名格式驗證通過
else {
$(this).css("border", "2px #cccccc solid");
$(this).parent().parent().find("td.span").remove();
var spanUserName = "<td class='spanPwd5'><span>用戶名格式通過!</span></td>";
$(this).parent().parent().find("td.td3").after(spanUserName);
return true;
}
});
}
//========================點擊按鈕與服務器互交驗證==============
$("tr td input.btton1").click(function () {
if (GetUserName() && GetEmail() && GetPassword()) {
var userName = $("td.td1 input").val(); //用戶名
var userPwd = $("td.td2 input").val(); //密碼
var userRepass = $("td.td3 input").val(); //確認密碼
var email = $("td.td4 input").val(); //郵箱
GetAjax(userName, userPwd, userRepass, email);
}
});
function GetAjax(userName, userPwd, userRepass, email) {
var json = [{ "userName": userName, "userPwd": userPwd, "userRepass": userRepass, "email": email}];
$.post("ProcessResult.aspx?jon=" + json, function (data) {
if (data == "false") {
alert("用戶名重復了，請重新輸入!");
} else if (data == "ok") {
alert("注冊成功!");
} else {
alert("對不起，你的輸入有誤,請檢查輸入");
}
})
}
});
</script>
5實現(xiàn)如下效果:
我沒有實現(xiàn)后臺JQuery校驗，下次有機會一并補上，這次先寫到這里，只實現(xiàn)純前端的效果。
關于使用JQuery實現(xiàn)智能表單驗證功能的相關知識就給大家介紹到這里，希望對大家有所幫助！
相關文章
juqery 學習之三 選擇器 層級 基本，學習jquery的朋友可以參考下。2010-11-11
這篇文章主要為大家詳細介紹了jQuery表單校驗插件validator的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這個DivAlert插件，顧名思義就是頁面彈出框，也就相當于Winform里面MessageBox.Show()那樣的東西。2010-04-04
Jquery練習之表單驗證實現(xiàn)代碼，學習jquery的朋友可以參考下。2010-12-12
最近我在做一個安全監(jiān)測系統(tǒng)，選擇了用easyui進行搭建，easyui是一種基于jQuery的用戶界面插件集合。使用easyui可以省去很多代碼，功能上需要加一些樣式。下面小編給大家介紹下給Easyui-Datebox設置隱藏或者不可用的解決方法2017-05-05
Jquery中的很多方法都是如此，主要包括如下幾個2009-01-01
這篇文章主要為大家詳細介紹了jQuery用戶頭像裁剪插件cropbox.js的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
jquery動態(tài)創(chuàng)建div與input的實例代碼
下面小編就為大家?guī)硪黄猨query動態(tài)創(chuàng)建div與input的實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了使用jquery做的一個簡單的屏幕鎖定提示框,需要的朋友可以參考下2014-03-03
JQuery給元素綁定click事件多次執(zhí)行的解決方法
這篇文章主要介紹了JQuery給元素綁定click事件多次執(zhí)行的解決方法,需要的朋友可以參考下2014-05-05