Jquery.Form和jquery.validate 的使用
有些功能需要我们利用Ajax技术进行POST提交表单,这时候就需要用到jquery.Form ,它有两种方式进行提交, AjaxForm和AjaxSubmit方式。
AjaxForm 方式必须先绑定表单,它一般在$(document).ready(function () {}里定义,它能让表单不刷新页面的情况下POST到目标。
如:
$(document).ready(function () {
$("#UpdateForm").ajaxForm(function(){
Alert(“AjaxForm提交完成”)
});
}
AjaxSubmit方式是以相应事件来通过Ajax方式提交表单,比如单击某个按钮触发该表单的提交
如:
$(“#btnTest”).click(function(){
$("#UpdateForm").AjaxSubmit (function(){
Alert(“AjaxForm提交完成”)
});
})
一、参数说明
1)BeforeSubmit
BeforeSubmit参数用来在表单提交到Server之前 验证其数据的合法性,如果提交之前执行的回调函数返回False,表单的提交将会终止。
2)Success
Success参数表单提交完成之后执行
二、API接口说明
1) FormSerialize
将表单序列化成查询串。这个方法将返回一个形如: name1=value1&name2=value2的字符串。
如:
var queryString = $('# myFormId).formSerialize();
等效于var queryString = $.param(formData)方法
这两个方法返回的值是相同的
2) fieldSerialize
将表单里的元素序列化成字符串。当你只需要将表单的部分元素序列化时可以用到这个方法。这个方法将返回一个形如: name1=value1&name2=value2的字符串。
var queryString = $('#myFormId .specialFields').fieldSerialize();
specialFields是该元素的Class值
3) fieldValue
取出所有匹配要求的域的值,以数组形式返回。从 0.91 版本开始, 这个方法始终返回一个数组。如果没有符合条件的域,这个数组将会是个空数组,否则它将会包含至少一个值。
var value = $('# myFormId':password').fieldValue();
alert('The password is: ' + value[0]);
4) resetForm
通过调用表单元素的内在的DOM 上的方法把表单重置成最初的状态。
$('#myFormId').resetForm();
5) clearForm
清空表单所有元素的值。这个方法将会清空所有的文本框,密码框,文本域里的值,去掉下拉列表所有被选中的项,让所有复选框和单选框里被选中的项不再选中。
$('#myFormId').clearForm();
6) clearFields
清空某个表单域的值。这个可以用在只需要清空表单里部分元素的值的情况。
$('#myFormId .specialFields').clearFields();
specialFields是该元素的Class值
三、Server端返回格式处理
1)Json格式
在设置返回Json格式时,要设置Option中DataType格式如下
dataType: 'json',
JS验证成功到Server端代码:
if (ModelState.IsValid)
{
return Json(new { a = "a", b = "b" });
}
Form提交完成之后success方法将被执行,responseText 和 responseXML 的值会被传进这个参数 (这个要依赖于dataType的类型)
success: function (responseText, statusText, xhr, $form) {
alert(responseText.a);
}
2)XML格式
在设置返回XML格式时,要设置Option中DataType格式如下
dataType: 'xml',
JS验证成功到Server端代码:
//返回一个XML类型
string xmlString = "<?xml version=\"1.0\" encoding=\"gb2312\" ?><tree id=\"0\"><item text=\"北京欢迎你\"/></tree>";
return this.Content(xmlString, "text/xml");
Form提交完成之后success方法将被执行
success: function (responseText, statusText, xhr, $form) {
alert(xhr.responseText)
}
3)HTML格式
在设置返回HTML格式时,要设置Option中DataType格式如下
dataType: ‘HTML’,
JS验证成功到Server端代码:
string htmlString = "<div style=\"background:red\">Test<div>";
return Content(htmlString);
Form提交完成之后success方法将被执行
success: function (responseText, statusText, xhr, $form) {
alert(responseText)
}
jquery.validate 使用
一、使用Jquery.Validate进行验证方法
$(document).ready(function () {
$("#pageForm").validate({
rules: {
DictKey: { required: true, maxlength: 10 },
DictContent: { required: true, maxlength: 10 }
},
messages: {
DictKey: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符") },
DictContent: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符") }
},
submitHandler: function (form) {
form.submit();
}
})
})
DictKey ,DictContent:指需要验证的控件ID
submitHandler :指通过验证后运行的函数,里面写入表单要提交的函数,否则表单不会提交
二、列出常用默认验证规则
(1)required:true 必输字段
(2)email:true 必须输入正确格式的电子邮件
(3)url:true 必须输入正确格式的网址
(4)date:true 必须输入正确格式的日期
(5)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(6)number:true 必须输入合法的数字(负数,小数)
(7)digits:true 必须输入整数
(8)creditcard: 必须输入合法的信用卡号
(9)equalTo:"#field" 输入值必须和#field相同
(10)accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
(11)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(12)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(13)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(14)equalLength:10 输入长度必须是10
(14)range:[5,10] 输入值必须介于 5 和 10 之间
(15)max:5 输入值不能大于5
(16)min:10 输入值不能小于10
三、使用ajax方法验证输入值是否存在
当文本框输入值时,或改变输入值时会自动到Server去验证输入值是否在数据库中存在
JS代码如下:
DictKey: { required: true, maxlength: 10,
remote: { //验证用户名是否存在
type: "POST",
url: '@Url.Content("~/Account/Test/")' //servlet
}
},
DictKey: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符"),remote:"用户名已被注册"},
Server端:
[HttpPost]
public JsonResult Test(string DictKey) //DictKey即要验证控件的ID值
{
bool result;
if (DictKey == "a")
{
result = true;
}
else
{
result = false;
}
return Json(result);
}
根据Server端返回的True,False来决定验证是否通过
四、非submit按钮结合Jquery.Form进行提交
如果不是submit提交按钮,比如单击某个按钮触发表单验证,这时表单验证可用如下方式
function validateForm() {
//validate方法参数可选
return $("#form1").validate({
rules: {
},
messages:{
}
}).form();
}
function doSubmit(){
//do other things
//验证通过后提交
if(validateForm()){
form.submit()
//这边可以结合Jquery.Form进行AjaxSubmit方式异步提交
$("#UpdateForm").AjaxSubmit (function(){
Alert(“AjaxForm提交完成”)
});
}
}
Jquery.Form和jquery.validate 的使用的更多相关文章
- jquery.form.js+jquery.validation.js实现表单校验和提交
一.jquery引用 主要用到3个js: jquery.js jquery.form.js jquery.validation.js 另外,为了校验结果提示本地化,还需要引入jquery.vali ...
- http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#getting-started
http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#getting-started Jquery.Form 异步 ...
- jQuery.form.js jQuery ajax异步提交form
jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 官网下载地址:http://plugins.jquery.com/form/ API ajaxForm 增加所 ...
- jquery.form.js(ajax表单提交)
Form插件地址: 官方网站:http://malsup.com/jQuery/form/ 翻译地址:http://www.aqee.net/docs/jquery.form.plugin/jquer ...
- 怎么利用jquery.form 提交form
说明:开发环境 vs2012 asp.net mvc c# 利用jQuery.form.js提交form 1.HTML前端代码 <%@ Page Language="C#" ...
- jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- jquery.form.js表单插件的使用
jquery.form.js官网:http://malsup.com/jquery/form API文档:http://malsup.com/jquery/form/#api 下载地址:http:// ...
- jquery.form的使用
插件API http://malsup.com/jquery/form/#api Jquery.form.js是支持文件异步上传的插件,jq插件自然基本前提当然是要引用Jquery.js 1.0 基本 ...
- jQuery.form 中的 ajaxForm() 和 ajaxSubmit()
官方例子 http://malsup.com/jquery/form/#ajaxForm官方API http://malsup.com/jquery/form/#api中文API http: ...
随机推荐
- CentOS vsftpd搭建快速流程
1.yum install vsftpd 2.chkconfig vsftpd on 3.service vsftpd start 4.adduser -d /home/bp -g ftp -s /s ...
- Android App的签名打包三步骤
1.签名的意义 为了保证每个应用程序开发商合法ID,防止部分开放商可能通过使用相同的Package Name来混淆替换已经安装的程序,我们需要对我们发布的APK文件进行唯一签名,保证我们每次发布的版本 ...
- 使用 Eclipse PhoneGap 构建 Android 应用程序入门
Eclipse 是一种支持多种技术的开源集成开发环境 (IDE),但本文重点介绍 Java 支持,这也是 Android 应用程序的“母语”.Android 是 Google 发布的开源移动操作系统. ...
- pwnable.kr-flag
题目: 使用 file 命令查看下载回来的 flag 文件,发现是一个64位的 ELF 可执行程序.通过查看,发现其具有明显的 UPX 压缩标志,所以解压之. 使用命令upx –d 进行脱壳,如果没有 ...
- 1171. Lost in Space
http://acm.timus.ru/problem.aspx?space=1&num=1171 一天的时间,WA了N遍,居然是因为数组开小了呀,我勒个去!鄙视自己...... 我是从第 1 ...
- 【Python扩展阅读【转】】字符串的方法及注释
capitalize() 把字符串的第一个字符改为大写 casefold() 把整个字符串的所有字符改为小写 center(width) 将字符串居中,并使用空格填充至长度wi ...
- 一次DB服务器性能低下引发的对Nonpaged Pool Leak问题的诊断
1. 问题表象+分析 最开始是DB访问性能下降,某个不用Cache.直接到DB的查询10s+都不返回.上去一看,DB Server内存97%,可用内存才100多M. Windows毕竟不是iOS,不留 ...
- java堆栈区别
/*java程序在运行时,jvm把内存分为5块,栈,堆,方法区,本地方法区,寄存器 栈:存储的是局部变量,在函数语句中定义的变量都是局部变量 for(int i=1;i<=5;i++){} ad ...
- 【转】MySQL中varchar最大长度是多少?
一. varchar存储规则: 4.0版本以下,varchar(20),指的是20字节,如果存放UTF8汉字时,只能存6个(每个汉字3字节) 5.0版本以上,varchar(20),指的是20字符,无 ...
- Flask源码学习—config配置管理
自己用Flask做了一个博客(www.hbnnlove.sinaapp.com),之前苦于没有对源码解析的文档,只能自己硬着头皮看.现在我把我自己学习Flask源码的收获写出来,也希望能给后续要学习F ...