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 相关文章推荐
div模拟选择框示例代码
Nov 03 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
vue调用本地摄像头实现拍照功能
Aug 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实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
jQuery实现计算器功能
2020/10/19 jQuery
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
如何利用python 读取配置文件
2021/01/06 Python
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
企划专员岗位职责
2013/12/09 职场文书
乳制品整治工作方案
2014/05/29 职场文书
年终奖发放方案
2014/06/02 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
解除同居协议书
2015/01/29 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android