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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
javascript实现切割轮播效果
Nov 28 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
第三节--定义一个类
2006/11/16 PHP
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
Three.js学习之网格
2016/08/10 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
python中反射用法实例
2015/03/27 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
英语师范专业毕业生自荐信
2013/09/21 职场文书
追悼会上的答谢词
2014/01/10 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
军训决心书范文
2015/09/22 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书
MySQL里面的子查询的基本使用
2021/08/02 MySQL
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android