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 鼠标点击事件及其它捕获
Jun 04 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
vue axios整合使用全攻略
May 24 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
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实例分享之二维数组排序
2014/05/15 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
Django 自动生成api接口文档教程
2019/11/19 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
秋季红领巾广播稿
2014/01/27 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
2015年团支书工作总结
2015/04/03 职场文书
会议营销主持词
2015/07/03 职场文书
php引用传递
2021/04/01 PHP
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python
Python实现位图分割的效果
2021/11/20 Python
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android