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 相关文章推荐
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
jquery实现弹出层效果实例
May 19 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
百度小程序之间的页面通信过程详解
Jul 18 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与javascript的两种交互方式
2006/10/09 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
javascript动态加载二
2012/08/22 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
浅析Ajax语法
2016/12/05 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
python抓取京东小米8手机配置信息
2018/11/13 Python
Python语言异常处理测试过程解析
2020/01/08 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
Python内置函数及功能简介汇总
2020/10/13 Python
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
个人自我鉴定总结
2014/03/25 职场文书
安全演讲稿大全
2014/05/09 职场文书
软件售后服务承诺书
2014/05/21 职场文书
个人作风建设总结
2014/10/23 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript