基于jquery實(shí)現(xiàn)即時(shí)檢查格式是否正確的表單
更新時(shí)間：2016年05月06日 08:38:44 作者：張楊
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)即時(shí)檢查格式是否正確的表單具體代碼，感興趣的小伙伴們可以參考一下
現(xiàn)在很多網(wǎng)站的注冊(cè)模塊都可以實(shí)現(xiàn)即時(shí)檢查格式是否正確，這樣極大的增強(qiáng)了用戶體驗(yàn)，對(duì)開(kāi)發(fā)非常有利。
下面的代碼是利用jquery實(shí)現(xiàn)了對(duì)一個(gè)表單字段格式的即時(shí)檢查（包括字段長(zhǎng)度、郵箱格式），同時(shí)在提交時(shí)，再次出發(fā)檢查事件。
注意這個(gè)檢查是keyup和focus上為主，利用這兩個(gè)事件來(lái)觸發(fā)blur（失去焦點(diǎn)）事件。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.3.2.min.js"></script>
<script>
$(function () {
//為每個(gè)必填字段后面加上*
$("form :input.required").each(function () {
var $required = $("<strong class='high'>*</strong>");
$(this).parent().append($required);
});
//textbox失去焦點(diǎn)事件
$("form :input").blur(function () {
var $parent = $(this).parent();
$parent.find(".formtips").remove();
if ($(this).is('#username')) {
if (this.value == "" || this.value.length < 6) {
var errorMsg = "請(qǐng)輸入至少6位的用戶名";
$parent.append('<span class="formtips onError">' + errorMsg + "</span>");
} else {
var okMsg = "輸入正確"
$parent.append('<span class="formtips onSuccess">' + okMsg + '</span>');
}
}
if ($(this).is('#email')) {
if (this.value == "" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) {
var errorMsg = "請(qǐng)輸入正確的E-Mail地址";
$parent.append('<span class="formtips onError">' + errorMsg + "</span>");
} else {
var okMsg = "輸入正確"
$parent.append('<span class="formtips onSuccess">' + okMsg + '</span>');
}
}
}).keyup(function () {
$(this).triggerHandler("blur");//keyup和focus利用triggerHandler來(lái)觸發(fā)blur事件
}).focus(function () {
$(this).triggerHandler("blur");
});
$("#send").click(function () {//提交按鈕事件
$("form .required:input").trigger('blur');
var numError = $('form .onError').length;
if(numError)
{
return false;
}
alert("注冊(cè)成功，密碼已發(fā)到你的郵箱，請(qǐng)查收");
});
});
</script>
</head>
<body>
<form method="post" action="">
<div class="int">
<label for="username">用戶名</label>
<input type="text" id="username" class="required" />
</div>
<div class="int">
<label for="email">郵箱</label>
<input type="text" id="email" class="required" />
</div>
<div class="int">
<label for="=personinfo">個(gè)人資料</label>
<input type="text" id="personinfo" />
</div>
<div class="sub">
<input type="submit" value="提交" id="send" />
<input type="reset" id="res" />
</div>
</form>
</body>
</html>
更多內(nèi)容點(diǎn)擊：jquery表單驗(yàn)證大全
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)jquery程序設(shè)計(jì)有所幫助。
相關(guān)文章
之前發(fā)布過(guò)一片文章：自己動(dòng)手做jquery 好友輸入提示插件 ,現(xiàn)在這次發(fā)布的是增強(qiáng)版，在功能和用戶體驗(yàn)等方面多做了改善和拓展。2009-05-05
基于JQuery實(shí)現(xiàn)頁(yè)面定時(shí)彈出廣告
這篇文章主要介紹了基于JQuery實(shí)現(xiàn)頁(yè)面定時(shí)彈出廣告,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
jQuery中insertBefore()方法用法實(shí)例
這篇文章主要介紹了jQuery中insertBefore()方法用法,實(shí)例分析了insertBefore()方法的功能、定義及把匹配的元素插入到另一個(gè)指定的元素集合前面的使用技巧,需要的朋友可以參考下2015-01-01
jQuery防止click雙擊多次提交及傳遞動(dòng)態(tài)函數(shù)或多參數(shù)
這篇文章主要介紹了jQuery防止click雙擊多次提交及傳遞動(dòng)態(tài)函數(shù)方法,需要的朋友可以參考下2014-04-04
在閱讀本文之前，相信大家對(duì) jQuery 的總體架構(gòu)已經(jīng)了解了，這一篇文章主要來(lái)介紹 jQuery 的入口函數(shù) jQuery.fn.init。有需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-02-02
下面小編就為大家?guī)?lái)一篇jQuery 常用代碼集錦(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2016-05-05
jQuery asp.net 用json格式返回自定義對(duì)象
客戶端用一個(gè)html頁(yè)面調(diào)用一個(gè)ashx文件（一般http處理程序），返回 json格式的自定義對(duì)象2010-04-04
在jquery中自定義函數(shù)你會(huì)嗎？今天抽時(shí)間寫了幾個(gè)，個(gè)人感覺(jué)還不錯(cuò)，喜歡的朋友可以了解下2014-01-01
jQuery中將json數(shù)據(jù)顯示到頁(yè)面表格的方法
今天小編就為大家分享一篇jQuery中將json數(shù)據(jù)顯示到頁(yè)面表格的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
Jquery插件easyUi表單驗(yàn)證提交(示例代碼)
本篇文章主要是對(duì)Jquery插件easyUi表單驗(yàn)證提交的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12