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的Eval函数
Jul 26 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
原生JS实现幻灯片
Feb 22 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
前端路由&amp;webpack基础配置详解
Jun 10 Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 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
PHP4实际应用经验篇(4)
2006/10/09 PHP
PHP新手上路(三)
2006/10/09 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
UserData用法总结 lanyu出品
2010/07/01 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
在Django中创建动态视图的教程
2015/07/15 Python
浅析Python基础-流程控制
2016/03/18 Python
Python+微信接口实现运维报警
2016/08/27 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
python hashlib加密实现代码
2019/10/17 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
怎样让char类型的东西转换成int类型
2013/12/09 面试题
教师绩效工资方案
2014/02/01 职场文书
五年级数学教学反思
2014/02/11 职场文书
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python