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 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 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
source.php查看源文件
2006/12/09 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
event对象的方法 兼容多浏览器
2009/06/27 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
苹果香港官方商城:Apple香港
2016/09/14 全球购物
质检的岗位职责
2013/11/17 职场文书
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
工程造价专业求职信
2014/07/17 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
2014年公司工作总结
2014/11/22 职场文书
考研经验交流会策划书
2015/11/02 职场文书
JS数组去重详情
2021/11/07 Javascript