jquery實現智慧型表單

2022-01-29 12:27:27 字數 2367 閱讀 4681

現在很多**的註冊模組都可以實現即時檢查格式是否正確,這樣極大的增強了使用者體驗,對開發非常有利。

下面的**是利用jquery實現了對乙個表單字段格式的即時檢查(包括字段長度、郵箱格式),同時在提交時,再次出發檢查事件。

注意這個檢查是keyup和focus上為主,利用這兩個事件來觸發blur(失去焦點)事件。

doctype html

>

<

html

lang

="en"

xmlns

="">

<

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

() );

//textbox失去焦點事件

$("form :input

").blur(

function

()

else

}if($(

this

).is(

'#email

')) $

/.test(

this

.value)))

else

}}).keyup(

function

() ).focus(

function

() );

$("#send

").click(

function

() alert(

"註冊成功,密碼已發到你的郵箱,請查收");

});});

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"

>個人資料

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

>

jquery實現無重新整理提交表單

使用ajax 設定乙個表單,如 監聽.submit事件,可以在觸發表單提交時的事件,通過return false或者event.preventdefault 來阻止預設的表單提交事件 即 myform submit function e 可以自己封裝不同的js函式來將表單資料轉化成json格式 va...

Jquery實現非同步提交表單,解決多表單提交的問題

使用者資訊更新部分,同時提交多個表單 submitall on click function 這樣做的結果是,瀏覽器將提交小的表單先提交了,然後跳轉重新整理頁面。當然,這個問題不符合業務邏輯所以,使用ajaxsubmit來非同步提交表單,目的就是為了讓表單調教之後不function submitco...

jQuery表單校驗

formid validate 需要錄入的另一種寫法 ublog 需要輸入,且錄入的必須是url messages submithandler function form 閱讀一下文件差不多就會了解,支援的校驗格式有 required 必填字段 email 電子郵件 url 合法的 date 日期 ...