search

Home >Web Front-end >JS Tutorial >jQuery form form validation plug-in (fieldValue) verification form_jquery

jQuery form form validation plug-in (fieldValue) verification form_jquery

WBOY
WBOYOriginal
2016-05-16 15:18:271515browse

JQuery form form validation related knowledge is often used in projects. In fact, it is not complicated. Here is a piece of code to introduce to you the jQuery form form validation plug-in (fieldValue) related knowledge to verify the form. If you are interested Let’s study together with friends

<!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>

The above is the relevant content for the jQuery form form validation plug-in (fieldValue) to verify the form. I hope you like it.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to use $http to add, delete, modify and query MongoLab data tables in AngularJS_AngularJSNext article：How to use $http to add, delete, modify and query MongoLab data tables in AngularJS_AngularJS

Related articles

See more