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 相关文章推荐
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
纯JS代码实现气泡效果
May 04 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 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 Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
php调用c接口无错版介绍
2014/03/11 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
Javascript倒计时代码
2010/08/12 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
护士自荐信
2013/10/25 职场文书
奠基仪式主持词
2014/03/20 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
《三国志》赏析
2019/08/27 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书