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中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
JavaScript入门教程(5) js Screen屏幕对象
Jan 31 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
JavaScript中this函数使用实例解析
Feb 21 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 设计模式之观察者模式介绍
2012/02/22 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
删除重复数据的算法
2006/11/23 Javascript
用JQuery调用Session的实现代码
2010/10/29 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
Vue按需加载的具体实现
2017/12/02 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
python创建文件备份的脚本
2018/09/11 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
pytorch梯度剪裁方式
2020/02/04 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
法人授权委托书
2014/04/03 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL