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 相关文章推荐
jquery插件制作 表单验证实现代码
Aug 17 Javascript
网页右侧悬浮滚动在线qq客服代码示例
Apr 28 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
浅析Jquery操作select
Dec 13 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
详解原生JS回到顶部
Mar 25 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 Javascript
element-ui点击查看大图的方法示例
Dec 14 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 5.0对象模型深度探索之绑定
2006/09/05 PHP
PHP的宝库目录--PEAR
2006/10/09 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
深入了解Django View(视图系统)
2019/07/23 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
中学教师培训制度
2014/01/31 职场文书
小学生差生评语
2014/12/29 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
活动简报范文
2015/07/22 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
同学聚会开幕词
2019/04/02 职场文书
python使用shell脚本创建kafka连接器
2022/04/29 Python