jQuery form 表单验证插件(fieldValue)校验表单


Posted in Javascript onJanuary 24, 2016

jQuery form表单验证相关知识,在做项目中经常会用到,其实也不算复杂,下面通过一段代码给大家介绍jQuery form 表单验证插件(fieldValue)校验表单的相关知识,感兴趣的朋友一起学习吧

<!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 表单验证插件(fieldValue)校验表单的相关内容,希望大家喜欢。

Javascript 相关文章推荐
javascript 解析url的search方法
Feb 09 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
Bootstrap 布局组件(全)
Jul 18 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
vue中的inject学习教程
Apr 24 Javascript
javascript中如何判断类型汇总
May 14 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
Jquery实现纵向横向菜单
Jan 24 #Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 #Javascript
JavaScript jquery及AJAX小结
Jan 24 #Javascript
基于JavaScript短信验证码如何实现
Jan 24 #Javascript
详解JS面向对象编程
Jan 24 #Javascript
js中实现字符串和数组的相互转化详解
Jan 24 #Javascript
JavaScript基础知识之方法汇总结
Jan 24 #Javascript
You might like
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
浅谈五大Python Web框架
2017/03/20 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
itchat接口使用示例
2017/10/23 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
Python创建临时文件和文件夹
2020/08/05 Python
python 通过exifread读取照片信息
2020/12/24 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
函授本科毕业自我鉴定
2013/10/09 职场文书
kfc实习自我鉴定
2013/12/14 职场文书
春节活动策划方案
2014/01/24 职场文书
国培计划培训感言
2014/03/11 职场文书
银行进社区活动总结
2014/07/07 职场文书
商场收银员岗位职责
2015/04/07 职场文书
给下属加薪申请报告
2015/05/15 职场文书