jquery表單提交前驗(yàn)證,用jquery實(shí)現(xiàn)表單驗(yàn)證提交

Jquery.validate.js實(shí)現(xiàn)前端表單驗(yàn)證

jquery.validate.js表單驗(yàn)證

創(chuàng)新互聯(lián)建站主要為客戶提供服務(wù)項(xiàng)目涵蓋了網(wǎng)頁視覺設(shè)計(jì)、VI標(biāo)志設(shè)計(jì)、成都全網(wǎng)營銷、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式網(wǎng)站建設(shè)、手機(jī)網(wǎng)站制作、微商城、網(wǎng)站托管及成都網(wǎng)站維護(hù)公司、WEB系統(tǒng)開發(fā)、域名注冊(cè)、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計(jì)、SEO優(yōu)化排名。設(shè)計(jì)、前端、后端三個(gè)建站步驟的完善服務(wù)體系。一人跟蹤測(cè)試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為成都辦公窗簾行業(yè)客戶提供了網(wǎng)站設(shè)計(jì)服務(wù)。

官方網(wǎng)站：

API:

當(dāng)前版本：1.5.5

需要JQuery版本：1.2.6+, 兼容 1.3.2

script src="../js/jquery.js" type="text/javascript"/script

script src="../js/jquery.validate.js" type="text/javascript"/script

(1)required:true 必輸字段

(2)remote:"check.php" 使用ajax方法調(diào)用check.php驗(yàn)證輸入值

(3)email:true 必須輸入正確格式的電子郵件

(4)url:true 必須輸入正確格式的網(wǎng)址

(5)date:true 必須輸入正確格式的日期

(6)dateISO:true 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗(yàn)證格式，不驗(yàn)證有效性

(7)number:true 必須輸入合法的數(shù)字(負(fù)數(shù)，小數(shù))

(8)digits:true 必須輸入整數(shù)

(9)creditcard: 必須輸入合法的信用卡號(hào)

(10)equalTo:"#field" 輸入值必須和#field相同

(11)accept: 輸入擁有合法后綴名的字符串（上傳文件的后綴）

(12)maxlength:5 輸入長(zhǎng)度最多是5的字符串(漢字算一個(gè)字符)

(13)minlength:10 輸入長(zhǎng)度最小是10的字符串(漢字算一個(gè)字符)

(14)rangelength:[5,10] 輸入長(zhǎng)度必須介于 5 和 10 之間的字符串")(漢字算一個(gè)字符)

(15)range:[5,10] 輸入值必須介于 5 和 10 之間

(16)max:5 輸入值不能大于5

(17)min:10 輸入值不能小于10

例子：自定義密碼驗(yàn)證的規(guī)則

jquery在表單提交前有幾種校驗(yàn)方法

在表單提交前進(jìn)行驗(yàn)證的幾種方式 .

在Django中，為了減輕后臺(tái)壓力，可以利用JavaScript在表單提交前對(duì)表單數(shù)據(jù)進(jìn)行驗(yàn)證。下面提供了有效的幾種方式（每個(gè).html文件為一種方式）。

formpage1.html

復(fù)制代碼代碼如下:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

titleExample1/title

script type="text/javascript" src="/Resource/jquery-1.4.1.js"/script

script type="text/javascript"

function jump()

{

//清空表單所有數(shù)據(jù)

document.getElementById("firstname").value=""

document.getElementById("lastname").value=""

$("#firstnameLabel").text("")

$("#lastnameLabel").text("")

}

$(document).ready(function(){

$("#form1").bind("submit", function(){

var txt_firstname = $.trim($("#firstname").attr("value"))

var txt_lastname = $.trim($("#lastname").attr("value"))

$("#firstnameLabel").text("")

$("#lastnameLabel").text("")

var isSuccess = 1;

if(txt_firstname.length == 0)

{

$("#firstnameLabel").text("firstname不能為空！")

$("#firstnameLabel").css({"color":"red"});

isSuccess = 0;

}

if(txt_lastname.length == 0)

{

$("#lastnameLabel").text("lastname不能為空！")

$("#lastnameLabel").css({"color":"red"});

isSuccess = 0;

}

if(isSuccess == 0)

{

return false;

}

})

/script

/head

body

提交表單前進(jìn)行驗(yàn)證(方法一)

hr width="40%" align="left" /

form id="form1" method="post" action="/DealWithForm1/"

table

tdfirst_name:/td

tdinput name="firstname" type="text" id="firstname" //td

tdlabel id="firstnameLabel"/label/td

/tr

tdlast_name:/td

tdinput name="lastname" type="text" id="lastname" //td

tdlabel id="lastnameLabel"/label/td

/tr

/table

hr width="40%" align="left" /

button type="submit"提交/button

button type="button" onclick="jump();"取消/button

/form

/body

/html

formpage2.html

復(fù)制代碼代碼如下:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

titleExample2/title

script type="text/javascript" src="/Resource/jquery-1.4.1.js"/script

script type="text/javascript"

function jump()

{

//清空表單所有數(shù)據(jù)

document.getElementById("firstname").value=""

document.getElementById("lastname").value=""

$("#firstnameLabel").text("")

$("#lastnameLabel").text("")

}

function check(){

var txt_firstname = $.trim($("#firstname").attr("value"))

var txt_lastname = $.trim($("#lastname").attr("value"))

$("#firstnameLabel").text("")

$("#lastnameLabel").text("")

var isSuccess = 1;

if(txt_firstname.length == 0)

{

$("#firstnameLabel").text("firstname不能為空！")

$("#firstnameLabel").css({"color":"red"});

isSuccess = 0;

}

if(txt_lastname.length == 0)

{

$("#lastnameLabel").text("lastname不能為空！")

$("#lastnameLabel").css({"color":"red"});

isSuccess = 0;

}

if(isSuccess == 0)

{

return false;

}

return true;

}

/script

/head

body

提交表單前進(jìn)行驗(yàn)證(方法二)

hr width="40%" align="left" /

form id="form1" method="post" action="/DealWithForm1/" onsubmit="return check()"

table

tdfirst_name:/td

tdinput name="firstname" type="text" id="firstname" //td

tdlabel id="firstnameLabel"/label/td

/tr

tdlast_name:/td

tdinput name="lastname" type="text" id="lastname" //td

tdlabel id="lastnameLabel"/label/td

/tr

/table

hr width="40%" align="left" /

button type="submit"提交/button

button type="button" onclick="jump();"取消/button

/form

/body

/html

formpage3.html

復(fù)制代碼代碼如下:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

titleExample3/title

script type="text/javascript" src="/Resource/jquery-1.4.1.js"/script

script type="text/javascript"

function jump()

{

//清空表單所有數(shù)據(jù)

document.getElementById("firstname").value=""

document.getElementById("lastname").value=""

$("#firstnameLabel").text("")

$("#lastnameLabel").text("")

}

function checktosubmit(){

var txt_firstname = $.trim($("#firstname").attr("value"))

var txt_lastname = $.trim($("#lastname").attr("value"))

$("#firstnameLabel").text("")

$("#lastnameLabel").text("")

var isSuccess = 1;

if(txt_firstname.length == 0)

{

$("#firstnameLabel").text("firstname不能為空！")

$("#firstnameLabel").css({"color":"red"});

isSuccess = 0;

}

if(txt_lastname.length == 0)

{

$("#lastnameLabel").text("lastname不能為空！")

$("#lastnameLabel").css({"color":"red"});

isSuccess = 0;

}

if(isSuccess == 1)

{

form1.submit();

}

/script

/head

body

提交表單前進(jìn)行驗(yàn)證(方法三)

hr width="40%" align="left" /

form id="form1" method="post" action="/DealWithForm1/"

table

tdfirst_name:/td

tdinput name="firstname" type="text" id="firstname" //td

tdlabel id="firstnameLabel"/label/td

/tr

tdlast_name:/td

tdinput name="lastname" type="text" id="lastname" //td

tdlabel id="lastnameLabel"/label/td

/tr

/table

hr width="40%" align="left" /

button type="button" onclick="checktosubmit()"提交/button

button type="button" onclick="jump();"取消/button

/form

/body

/html

以下是視圖函數(shù)、URL配置以及相關(guān)設(shè)置

--------------------------------------------------------------------------------

views.py

復(fù)制代碼代碼如下:

#coding: utf-8

from django.http import HttpResponse

from django.shortcuts import render_to_response

def DealWithForm1(request):

if request.method=="POST":

FirstName=request.POST.get('firstname','')

LastName=request.POST.get('lastname','')

if FirstName and LastName:

response=HttpResponse()

response.write("htmlbody"+FirstName+" "+LastName+u"！你提交了表單！/body/html")

return response

else:

response=HttpResponse()

response.write('htmlscript type="text/javascript"alert("firstname或lastname不能為空！");\

window.location="/DealWithForm1"/script/html')

return response

else:

return render_to_response('formpage1.html')

def DealWithForm2(request):

if request.method=="POST":

FirstName=request.POST.get('firstname','').encode("utf-8")

LastName=request.POST.get('lastname','').encode("utf-8")

if FirstName and LastName:

html="htmlbody"+FirstName+" "+LastName+"！你提交了表單！"+"/body/html"

return HttpResponse(html)

else:

response=HttpResponse()

response.write('htmlscript type="text/javascript"alert("firstname或lastname不能為空！");\

window.location="/DealWithForm2"/script/html')

return response

else:

return render_to_response('formpage2.html')

def DealWithForm3(request):

if request.method=="POST":

FirstName=request.POST.get('firstname','')

LastName=request.POST.get('lastname','')

if FirstName and LastName:

response=HttpResponse()

response.write('htmlbody'+FirstName+LastName+u'！你提交了表單！/body/html')

return response

else:

response=HttpResponse()

response.write('htmlscript type="text/javascript"alert("firstname或lastname不能為空！");\

window.location="/DealWithForm3"/script/html')

return response

else:

return render_to_response('formpage3.html')

urls.py

復(fù)制代碼代碼如下:

from django.conf.urls.defaults import patterns, include, url

import views

from django.conf import settings

urlpatterns = patterns('',

url(r'^Resource/(?Ppath.*)$','django.views.static.serve',{'document_root':settings.STATIC_RESOURCE}),

url(r'^DealWithForm1','views.DealWithForm1'),

url(r'^DealWithForm2','views.DealWithForm2'),

url(r'^DealWithForm3','views.DealWithForm3'),

)

settings.py

復(fù)制代碼代碼如下:

# Django settings for CheckFormBeforeSubmit project.

import os

HERE = os.path.abspath(os.path.dirname(__file__))

DEBUG = True

TEMPLATE_DEBUG = DEBUG

...

STATIC_RESOURCE=os.path.join(HERE, "resource")

...

MIDDLEWARE_CLASSES = (

'django.middleware.common.CommonMiddleware',

'django.contrib.sessions.middleware.SessionMiddleware',

'django.middleware.csrf.CsrfViewMiddleware',

'django.contrib.auth.middleware.AuthenticationMiddleware',

'django.contrib.messages.middleware.MessageMiddleware',

'django.middleware.csrf.CsrfResponseMiddleware',

)

ROOT_URLCONF = 'CheckFormBeforeSubmit.urls'

TEMPLATE_DIRS = (

os.path.join(HERE,'template'),

# Put strings here, like "/home/html/django_templates" or "C:/www/django/templates".

# Always use forward slashes, even on Windows.

# Don't forget to use absolute paths, not relative paths.

)

jquery的form表單提交驗(yàn)證問題，提交的表單里有動(dòng)態(tài)append出來的輸入框，要提交表單時(shí)對(duì)單內(nèi)元素做驗(yàn)證！

看你驗(yàn)證是用的插件還是你自己寫的，如果是自己寫的驗(yàn)證，只要在append出的輸入框上重新綁定事件就可以了，

比如你有輸入框 input name="x"

append的輸入框也是input name="x"

那么你可以 $("input[name='x']").on('事件名稱',function(){

})

jquery.validate不用submit提交，用js提交的，怎么觸發(fā)驗(yàn)證??？

用 button.click提交。

舉例如下：

$("#form").validate();

$("#btn).click(function(){

if($("#form").valid()){

$("#form").submit();

}

});

jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得更簡(jiǎn)單，同時(shí)提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求。

該插件捆綁了一套有用的驗(yàn)證方法，包括 URL 和電子郵件驗(yàn)證，同時(shí)提供了一個(gè)用來編寫用戶自定義方法的 API。所有的捆綁方法默認(rèn)使用英語作為錯(cuò)誤信息，且已翻譯成其他 37 種語言。

擴(kuò)展資料

query-validate 插件

基本用法：

1、頁面中引入js依賴，因?yàn)関alidate是依賴jquery的需要先引入jquery。

2、表單校驗(yàn)，首先得有一個(gè)表單，即form標(biāo)簽，然后由于瀏覽器是通過name屬性來提交表單數(shù)據(jù)的，所以需要給校驗(yàn)的控件都加上name屬性。

rules里每個(gè)控件可以給多個(gè)驗(yàn)證方式，常用的有：

1、required 必填驗(yàn)證元素。

2、minlength(length) maxlength(length)。

3、rangelength(range)設(shè)置最小長(zhǎng)度、最大長(zhǎng)度和長(zhǎng)度范圍 [min,max]。

4、min(value) max(value) range(range) 設(shè)置最大值、最小值和值的范圍。

5、email() 驗(yàn)證電子郵箱格式。

JQuery實(shí)現(xiàn)提交表單時(shí)候驗(yàn)證所有文本框是否為空

這個(gè)可以再表單上添加onsubmit函數(shù)和使用jQuery的each函數(shù)來判斷

script?type="text/javvascript"

var?flag?=?true;

function?checkForm(frm)?{

$("#frm?input[type='text']").each(function(i,?obj)?{

if(obj.value?==?"")?{

alert($(obj).attr("placeholder"));

flag?=?false;

return?false;

}

});

return?flag;

}

/script

form?ation="目標(biāo)地址"?method="post"?onsubmit="return?checkForm();"?id="frm"

文本1：input?type="text"?name="txt1"?value=""?placeholder="文本1不能為空"/br/

文本2：input?type="text"?name="txt2"?value=""?placeholder="文本2不能為空"/br/

文本3：input?type="text"?name="txt3"?value=""?placeholder="文本3不能為空"/br/

文本4：input?type="text"?name="txt4"?value=""?placeholder="文本4不能為空"/br/

文本5：input?type="text"?name="txt5"?value=""?placeholder="文本5不能為空"/br/

input?type="submit"?value="提交表單"/

/form

網(wǎng)頁名稱：jquery表單提交前驗(yàn)證,用jquery實(shí)現(xiàn)表單驗(yàn)證提交
新聞來源：http://m.jiaotiyi.com/article/dsdicpi.html

網(wǎng)站建設(shè)知識(shí)

jquery表單提交前驗(yàn)證,用jquery實(shí)現(xiàn)表單驗(yàn)證提交

Jquery.validate.js實(shí)現(xiàn)前端表單驗(yàn)證

jquery在表單提交前有幾種校驗(yàn)方法

jquery的form表單提交驗(yàn)證問題，提交的表單里有動(dòng)態(tài)append出來的輸入框，要提交表單時(shí)對(duì)單內(nèi)元素做驗(yàn)證！

jquery.validate不用submit提交，用js提交的，怎么觸發(fā)驗(yàn)證??？

JQuery實(shí)現(xiàn)提交表單時(shí)候驗(yàn)證所有文本框是否為空

其他資訊

網(wǎng)站建設(shè)知識(shí)

jquery表單提交前驗(yàn)證,用jquery實(shí)現(xiàn)表單驗(yàn)證提交

Jquery.validate.js實(shí)現(xiàn)前端表單驗(yàn)證

jquery在表單提交前有幾種校驗(yàn)方法

jquery的form表單提交驗(yàn)證問題，提交的表單里有動(dòng)態(tài)append出來的輸入框，要提交表單時(shí)對(duì)單內(nèi)元素做驗(yàn)證！

jquery.validate不用submit提交，用js提交的，怎么觸發(fā)驗(yàn)證??？

JQuery實(shí)現(xiàn)提交表單時(shí)候驗(yàn)證所有文本框是否為空

其他資訊

jquery的form表單提交驗(yàn)證問題，提交的表單里有動(dòng)態(tài)append出來的輸入框，要提交表單時(shí)對(duì)單內(nèi)元素做驗(yàn)證！

jquery.validate不用submit提交，用js提交的，怎么觸發(fā)驗(yàn)證??？