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 Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
如何动态加载外部Javascript文件
Dec 02 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 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/04/27 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
js模拟微博发布消息
2017/02/23 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
python的Template使用指南
2014/09/11 Python
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
python版简单工厂模式
2017/10/16 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
餐饮业的创业计划书范文
2013/12/26 职场文书
医院党员公开承诺书
2014/08/30 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android