jquery表单验证,jQuery表单验证判断用户名不能为空

jquery在表单提交前有几种校验方法

在表单提交前进行验证的几种方式 .

凭借整站使用HTML5建站的创新体验、定制设计、设计团队积累与透明式的服务过程,符合行业特点，专属顾问根据企业产品，消费群体属性，准确定位；设计师以目标客户为中心，以突出品牌官网特性为宗旨，定制专属网站建设设计方案。

在Django中，为了减轻后台压力，可以利用JavaScript在表单提交前对表单数据进行验证。下面提供了有效的几种方式（每个.html文件为一种方式）。

formpage1.html

复制代码代码如下:

!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()

{

//清空表单所有数据

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

提交表单前进行验证(方法一)

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

复制代码代码如下:

!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()

{

//清空表单所有数据

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

提交表单前进行验证(方法二)

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

复制代码代码如下:

!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()

{

//清空表单所有数据

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

提交表单前进行验证(方法三)

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

以下是视图函数、URL配置以及相关设置

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

views.py

复制代码代码如下:

#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

复制代码代码如下:

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

复制代码代码如下:

# 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验证表单是否为空

jquery判断表单提交内容是否为空

按照代码就能实现。

简单代码如下：

$(document).ready(function() {

$(“form”).submit(function(){

if ($(“select[name='boardid']“).val() == “”){

alert(“对不起，请选择类别！”);

$(“select[name='boardid']“).focus();

return false;

}

if ($(“select[name='boardid']“).val() == “请选择分类”){

alert(“对不起，请选择类别！”);

$(“select[name='boardid']“).focus();

return false;

}

if ($(“input[name='txtcontent']“).val() == “”){

alert(“对不起，请填写内容！”)

$(“input[name='txtcontent']“).focus();

return false

}

if ($(“input[name='txtcontent']“).val().length 150){

alert(“对不起，内容超过150个字符限制！”)

$(“input[name='txtcontent']“).focus();

return false

}})

$(“#t”).keyup(function(){

$(“.inner”).text($(“input[name='txtcontent']“).val());

}).change(function(){

$(“.inner”).text($(“input[name='txtcontent']“).val());

});

jQuery为什么需要进行表单验证

不是jQuery需要进行表单验证，是网页在提交数据的时候，为了减轻服务器的活，把能做的都在前端做了。

比如，用户输入一个手机号码，如果该手机号码格式是错的，比如格式是158125238pp

然后前端人员又没有对数据进行验证，然后又提交到服务器那里去，很显然这个手机号是错的，服务器存储这个手机号一点用处也没有、、、

所以需要进行表单验证

Jquery.validate.js实现前端表单验证

jquery.validate.js表单验证

官方网站：

API:

当前版本：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方法调用check.php验证输入值

(3)email:true 必须输入正确格式的电子邮件

(4)url:true 必须输入正确格式的网址

(5)date:true 必须输入正确格式的日期

(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性

(7)number:true 必须输入合法的数字(负数，小数)

(8)digits:true 必须输入整数

(9)creditcard: 必须输入合法的信用卡号

(10)equalTo:"#field" 输入值必须和#field相同

(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）

(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)

(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)

(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)

(15)range:[5,10] 输入值必须介于 5 和 10 之间

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

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

例子：自定义密码验证的规则

当前文章：jquery表单验证,jQuery表单验证判断用户名不能为空
分享URL：http://dzwzjz.com/article/hodiih.html

大橙子网站建设，新征程启航

jquery表单验证,jQuery表单验证判断用户名不能为空

jquery在表单提交前有几种校验方法

jquery验证表单是否为空

jQuery为什么需要进行表单验证

Jquery.validate.js实现前端表单验证

其他资讯