jquery表单验证(jquery validate 怎么验证单选框)

编程之家2023-11-0297次浏览

亲爱的读者们，你是否对jquery表单验证和jquery validate 怎么验证单选框的关系感到好奇？在本文中，我将深入探讨它们之间的联系，让你对此有更深刻的理解。

jquery validate 怎么验证单选框

1、下载并导入js

2、初始化参数

$.validator.setDefaults({

//验证成功后回调参数对象

submitHandler: function(){//回调方法

document.forms[0].submit();//验证通过后提交

}

});

$.metadata.setType("attr","validate");

//单选框、复选框，用validate设置

//详细见单选复选例子

$("form").validate({//绑定需要验证的form表单

//自定义参数对象

errorPlacement: function(error, element){//设置错误提示消息位置，可选

error.appendTo($(element).parents("td")[0]);

}

});

3、设定错误信息样式

label.error{

color:red;

display:block

}

</style>

注意，样式名固定为

label.error，样式内容可修改。

4、表单元素绑定验证

绑定方法：

class=”XXX”或xxx=”XXX”,

例如

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

jquery.validate.js表单验证

官方网站： http://bassistance.de/jquery-plugins/jquery-plugin-validation/

API: http://jquery.bassistance.de/api-browser/plugins.html

当前版本：1.5.5

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

(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

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

validate jquery怎么判断一个表单是否通过验证

validate jquery判断一个表单是否通过验证的方法是看页面是否发生跳转。

如果通过验证那么跳转页面，否则停留在原页面进行提示错误。

<html>

<head>

$(document).ready(function(){

//validate自定义验证

jQuery.validator.addMethod("isZipCode", function(value, element){

var tel=/^[0-9]{6}$/;

return this.optional(element)||(tel.test(value));

},"请正确填写您的邮政编码");

$("#signupForm").validate({

rules:{

firstname:"required",

ybno:{

isZipCode: true

email:{

required: true,//表示不得为空

email: true//自带邮箱验证

password:{

required: true,

minlength: 5//自带判断字符最小长度

confirm_password:{

required: true,

minlength: 5,

equalTo:"#password"

//自带判断当前文本框值与指定ID为password的文本框的值是否相同

}

messages:{

firstname:"请输入姓名",

email:{

required:"请输入Email地址",

email:"请输入正确的email地址"

password:{

required:"请输入密码",

minlength: jQuery.format("密码不能小于{0}个字符")

confirm_password:{

required:"请输入确认密码",

minlength:"确认密码不能小于5个字符",

equalTo:"两次输入密码不一致不一致"

}

});

</script>

//错误提示信息的样式

label.error{color: Red;padding-left: 20px; border:1px solid#006655; margin-left:10px;

padding-left:0px; font-size:12px;}

input.error{border: solid 1px red;}

</style>

</head>

<body>

<p>

<label for="firstname">Firstname</label>

</p>

<p>

</p>

<p>

</p>

<p>

<label for="password">Password</label>

</p>

<p>

</p>

<p>

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

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

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

formpage1.html

复制代码代码如下:

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Example1</title>

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>

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

<table>

<tr>

<td>first_name:</td>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

formpage2.html

复制代码代码如下:

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Example2</title>

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>

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

<table>

<tr>

<td>first_name:</td>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

formpage3.html

复制代码代码如下:

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Example3</title>

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>

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

<table>

<tr>

<td>first_name:</td>

</tr>

<tr>

</tr>

</table>

</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("<html><body>"+FirstName+""+LastName+u"！你提交了表单！</body></html>")

return response

else:

response=HttpResponse()

response.write('<html><script 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="<html><body>"+FirstName+""+LastName+"！你提交了表单！"+"</body></html>"

return HttpResponse(html)

else:

response=HttpResponse()

response.write('<html><script 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('<html><body>'+FirstName+LastName+u'！你提交了表单！</body></html>')

return response

else:

response=HttpResponse()

response.write('<html><script 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/(?P<path>.*)$','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 validate 怎么验证单选框的问题进行探讨，为您提供了一些有用的见解和解决方案。如果您需要更多帮助或者有其他疑问，请不要犹豫与我们联系。