form插件之formDdata参数校验表单及验证后提交,校验表单
分类:微服架构

jQuery form 表单验证插件(田野先生Value卡塔尔(قطر‎校验表单,jquery田野(field卡塔尔(قطر‎value

jQuery form表单验证相关知识,在做项目中常常会用到,其实也不算复杂,上边通过豆蔻梢头段代码给我们介绍jQuery form 表单验证插件(田野同志ValueState of Qatar校验表单的有关知识,感兴趣的爱人一齐上学吧

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery form插件的使用--使用 fieldValue 方法校验表单.</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function() { 
$('#myForm').ajaxForm({ 
target: '#output1', // 用服务器返回的数据 更新 id为output1的内容.
beforeSubmit: validate // 提交前,验证
}); 
});
function validate(formData, jqForm, options) { 
// fieldValue 是表单插件的一个方法,它能找出表单中的元素的值,返回一个集合。
var usernameValue = $('input[name=name]').fieldValue(); 
var addressValue = $('input[name=address]').fieldValue(); 
if (!usernameValue[0] || !addressValue[0]) { 
alert('用户名和地址不能为空,自我介绍可以为空!'); 
return false; 
} 
var queryString = $.param(formData); //组装数据
//alert(queryString); //类似 : name=1&add=2 
return true; 
}
</script> 
</head>
<body>
<h3> Demo 7 : jQuery form插件的使用--使用 fieldValue 方法校验表单. </h3>
<!-- demo1 -->
<form id="myForm" action="ajax2.jsp" method="post"> 
名称: <input type="text" name="name" id="name" /> <br/>
地址: <input type="text" name="address" id="address"/><br/> 
自我介绍: <textarea name="comment" id="comment" ></textarea> <br/>
<input type="submit" id="test" value="提交" /> <br/>
<div id="output1" ></div>
</form>
</body>
</html>

上述所述是针对性jQuery form 表单验证插件(田野Value卡塔尔校验表单的连带内容,希望大家艰苦奋斗。

jQuery Form 表单提交插件之formSerialize,田野(fieldState of QatarSerialize,田野先生Value,resetForm,clearForm,clearFields的使用,serialize田野先生

一、jQuery Form的其他api

1. formSerialize

将表单体系化成查询串。这些主意将再次来到二个形如: name1=value1&name2=value2的字符串。
是不是能够连环调用: 否, 那个方法重回的是二个字符串。

例子:

var queryString = $('#myFormId').formSerialize(); 
// the data could now be submitted using $.get, $.post, $.ajax, etc 
$.post('myscript.jsp', queryString); 

2. fieldSerialize

将表单里的因素类别化成字符串。当您只必要将表单的风华正茂对因素系列化时得以用到这么些情势。 那么些方式将回到三个形如: name1=value1&name2=value2的字符串。
是还是不是足以连环调用: 否, 那一个主意再次回到的是三个字符串。

例子:

var queryString = $('#myFormId .specialFields').fieldSerialize();

3. fieldValue

抽取全体相配须要的域的值,以数组方式重临。 从 0.91 版本最早, 这些办法 始终 重回三个数组。 若无切合条件的域,那些数组将会是个空数组,不然它将会包蕴最少三个值。
是还是不是能够连环调用: 否, 这一个法子再次回到的是贰个数组。
例子:

// get the value of the password input 
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();

二、测验的事无巨细代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用.</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- 引入依赖的js -->
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function() { 
$('#test').click(function(){
var queryString = $('#myForm').formSerialize();
alert(queryString);
// 组装的数据可以用于 $.get, $.post, $.ajax ...
$.post('demo.jsp', queryString ,function(data){
$('#output1').html("提交成功!欢迎下次再来!").show(); 
}); 
return false;
})
//demo2
$('#test2').click(function(){
var queryString = $('#myForm2 *').fieldValue(); 
alert(queryString);
return false;
})
//重置表单
$('#test3').click(function(){
$('#myForm').resetForm();
$('#myForm2').resetForm();
})
//清除表单
$('#test4').click(function(){
$('#myForm').clearForm();
$('#myForm2').clearForm();
})
}); 
</script> 
</head>
<body>
<h3> Demo 3 : jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用. </h3>
<!-- demo1 -->
<form id="myForm" action="demo.jsp" method="post"> 
名称: <input type="text" name="name" /> <br/>
地址: <input type="text" name="address" /><br/> 
自我介绍: <textarea name="comment"></textarea> <br/>
<input type="submit" id="test" value="提交" /> <br/>
<div id="output1" style="display:none;"></div>
</form>
<br/><br/><br/>
<!-- demo2 -->
<form id="myForm2" action="demo.jsp" method="post"> 
名称: <input type="text" name="name2" class="special"/> <br/>
地址: <input type="text" name="address2" /><br/> 
自我介绍: <textarea name="comment2" class="special"></textarea> <br/>
单选:男<input type="radio" name="a" value="男" checked/> 
女<input type="radio" name="a" value="女"/><br/>
<input type="submit" id="test2" value="提交" /> <br/>
</form>
<br/><br/><br/>
<input type="button" id="test3" value="重置所有表单" /> <br/>
<input type="button" id="test4" value="清除所有表单" /> (提示:发现单选框以前选中的,也被清除了,跟重置有点区别!)<br/>
</body>
</html>

demo.jsp 代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");//防止乱码!
String name = request.getParameter("name");
String address = request.getParameter("address");
String comment = request.getParameter("comment");
System.out.println(name + " " +address + " " +comment);
%>

三、测量检验效果:

  1. form塞里alize()测验效果:

空的时候:

图片 1

填写西班牙语的时候:

图片 2

填写中文的时候:

图片 3

图片 4

  1. 田野先生Value()测量检验效果:

空值的时候:

图片 5

填写葡萄牙语的时候:

图片 6

填写汉语的时候:

图片 7

  1. resetForm()的测验效果

图片 8

重置前:

图片 9

重置后:

图片 10

  1. clearForm()方法的效力:

消灭前效果:

图片 11

破除后效果:

图片 12

jQuery form插件之formDdata参数校验表单及表明后交由,jqueryformddata

Form Plugin API 里提供了众多一蹴而就的不二秘籍能够让您轻轻巧松的管理表单里的多寡和表单的提交进程。

测量试验境遇:布署到Tomcat中的web项目。

风姿罗曼蒂克、引进信任js

<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>

二、开首化回调函数。

第大器晚成,我们开端化那么些表单,给它叁个 beforeSubmit 回调函数 - 那是一个用来校验的函数。

$(document).ready(function() { 
$('#myForm').ajaxForm({ 
target:'#output1', // 用服务器返回的数据 更新 id为output1的内容.
beforeSubmit: validate // 提交前,验证
}); 
});

三、校验准则

function validate(formData, jqForm, options) { 
// formdata是数组对象,每个对象拥有名称和值.
// 数据如下面的格式:
// [ 
// { name: username , value: usernameValue }, 
// { name: password , value: passwordValue } 
// ] 
for (var i=0; i < formData.length; i++) { 
if (!formData[i].value) { 
alert('用户名,地址和自我介绍都不能为空!'); 
return false; 
} 
} 
var queryString = $.param(formData); //组装数据
//alert(queryString); //类似 : name=1&add=2 
return true; 
}

四、详细代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery form插件的使用--用 formData 参数校验表单</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function() { 
$('#myForm').ajaxForm({ 
target: '#output1', // 用服务器返回的数据 更新 id为output1的内容.
beforeSubmit: validate // 提交前,验证
}); 
});
function validate(formData, jqForm, options) { 
// formdata是数组对象,每个对象拥有名称和值.
// 数据如下面的格式:
// [ 
// { name: username , value: usernameValue }, 
// { name: password , value: passwordValue } 
// ] 
for (var i=0; i < formData.length; i++) { 
if (!formData[i].value) { 
alert('用户名,地址和自我介绍都不能为空!'); 
return false; 
} 
} 
var queryString = $.param(formData); //组装数据
//alert(queryString); //类似 : name=1&add=2 
return true; 
}
</script> 
</head>
<body>
<h3> Demo 5 :jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证). </h3>
<form id="myForm" action="ajax2.jsp" method="post"> 
名称: <input type="text" name="name" id="name" /> <br/>
地址: <input type="text" name="address" id="address"/><br/> 
自我介绍: <textarea name="comment" id="comment" ></textarea> <br/>
<input type="submit" id="test" value="提交" /> <br/>
<div id="output1" ></div>
</form>
</body>
</html>

上述所述是我给我们分享的jQuery form插件之formDdata参数校验表单及阐明后提交的全体内容,希望对大家具有扶持。

你只怕感兴趣的稿子:

  • jQuery formValidator表单验证插件开源了 含API援助、源码、示例
  • jQuery 表单验证插件formValidation完结性情化错误提醒
  • jQuery表单验证插件formValidator(校勘版卡塔尔
  • jquery表单验证使用插件formValidator
  • 依据Bootstrap+jQuery.validate达成Form表单验证
  • jQuery formValidator表单验证

form 表单验证插件(田野Value卡塔尔(قطر‎校验表单,jquery田野先生value jQuery form表单验证相关知识,在做项目中平常会用到,其实也不算复杂,下边通过大器晚成...

你或然感兴趣的稿子:

  • jQuery 表单验证插件formValidation达成本性化错误提醒
  • jquery form表单提交插件asp.net后台汉语解码
  • jQuery表单验证插件formValidator(改善版卡塔尔(قطر‎
  • jQuery-serialize(卡塔尔(قطر‎输出种类化form表单值的方法
  • jQuery基于ajax(卡塔尔(قطر‎使用serialize(卡塔尔(قطر‎提交form数据的点子

Form 表单提交插件之formSerialize,田野先生Serialize,田野同志Value,resetForm,clearForm,clearFields的选取,serialize田野蓬蓬勃勃、jQuery Form的其它api 1. formSe...

你可能感兴趣的稿子:

  • Jquery ajaxsubmit上传图片实今世码
  • IE中jquery.form中ajax提交没影响清除格局分享
  • 在jQuery ajax中按键button和submit的分别深入分析
  • jquery formValidator插件ajax验证 内容不做别的退换再离开提醒错误的bug解决措施
  • jquery的ajaxSubmit(卡塔尔国异步上传图片并保留表单数据演示代码
  • jquery ajaxSubmit 异步提交的简便完结
  • jquery落成ajax提交form表单的艺术计算
  • jquery连串化form表单使用ajax提交后处理回来的json数据
  • jQuery使用ajaxSubmit(卡塔尔(قطر‎提交表单示例
  • Jquery基于Ajax方法自定义无刷新提交表单Form实例
  • jQuery form插件之ajaxForm(卡塔尔和ajaxSubmit(State of Qatar的可选参数项对象

form插件之formDdata参数校验表单及表明后交给,jqueryformddata Form Plugin API 里提供了累累实用的点子可以让您轻轻易松的拍卖表单里的多少和表...

本文由10bet手机官网发布于微服架构,转载请注明出处:form插件之formDdata参数校验表单及验证后提交,校验表单

上一篇:CentOS系统命令,SVN版本管理系统的安装10bet体育中文官网 下一篇:nconf部署文档,CentOS系统基于OCS2
猜你喜欢
热门排行
精彩图文