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面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
javascript 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
jquery实现上传文件进度条
Mar 26 jQuery
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
一次编写,随处运行
2006/10/09 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
PHP的自定义模板引擎
2017/03/24 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
javascript this详细介绍
2016/09/19 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
Python 创建子进程模块subprocess详解
2015/04/08 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
海外淘书首选:AbeBooks
2017/07/31 全球购物
职工运动会感言
2014/02/07 职场文书
喝酒检查书范文
2014/02/23 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
一行Python命令实现批量加水印
2022/04/07 Python