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 相关文章推荐
动态载入js提高网页打开速度的方法
Jul 04 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
angularjs模态框的使用代码实例
Dec 20 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 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运算符的知识大全
2011/11/03 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
webpack独立打包和缓存处理详解
2017/04/03 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
Python之re操作方法(详解)
2017/06/14 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
用python实现学生管理系统
2020/07/24 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
一个入门级python爬虫教程详解
2021/01/27 Python
德国旅游网站:weg.de
2018/06/03 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
Android面试题附答案
2014/12/08 面试题
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
P/Invoke是什么
2015/07/31 面试题
2015社区精神文明建设工作总结
2015/04/21 职场文书
离职证明格式样本
2015/06/12 职场文书
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android
Oracle 触发器trigger使用案例
2022/02/24 Oracle
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang