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鼠标事件大全 推荐收藏
Nov 01 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
JS实现520 表白简单代码
May 21 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
对layui中表单元素的使用详解
Aug 15 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下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
Vue表单实例代码
2016/09/05 Javascript
JavaScript 异步调用
2017/10/25 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
python人人网登录应用实例
2014/09/26 Python
Python3 Random模块代码详解
2017/12/04 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
销售自我评价
2013/10/22 职场文书
儿子婚宴答谢词
2014/01/09 职场文书
房屋出租协议书
2014/04/10 职场文书
机电专业求职信
2014/06/14 职场文书
党员评议思想汇报
2014/10/08 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
python基础之停用词过滤详解
2021/04/21 Python
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
Go语言基础知识点介绍
2021/07/04 Golang