web前端之锋利的jQuery六：jQuery对表单的操作
2016-12-06 18:56
513 查看
web前端之锋利的jQuery六：jQuery对表单的操作
一个表单主要是由三部分组成：（1）表单标签：包含处理表单数据所用的服务器端程序URL以及数据提交到服务器的方法
（2）表单域：包含文本框、密码框、隐藏框、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
（3）表单按钮：包括提交按钮、复位按钮和一般按钮，用于间数据传送到服务器上或者取消传送，还可以用来控制其他定义了处理脚本的处理工作。
1.单行文本框应用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>jQuery对表单的操作</title>
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":input").focus(function(){//当输入域获得焦点 (focus)
$(this).addClass("focus");
}).blur(function(){//当输入域失去焦点 (blur)
$(this).removeClass("focus");
});
});
</script>
<style type="text/css">
.focus{
border: 1px solid #f00;
background: #fcc;
}
</style>
</head>
<body>
<form action="#" method="POST" id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<label for="username">名称：</label>
<input id="username" type="text">
</div>
<div>
<label for="pass">密码：</label>
<input id="pass" type="password">
</div>
<div>
<label for="msg">详细信息：</label>
<textarea id="msg"></textarea>
</div>
</fieldset>
</form>
</body>
</html>2.多行文本框应用：
（1）高度的变化
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>jQuery对表单的操作</title>
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $comment=$("#comment");//获得评论框
$('.bigger').click(function(){
if(!$comment.is(":animated")){
if($comment.height()<500){
$comment.animate({height:"+=50"},400);
}
}
});
$('.smaller').click(function(){
if(!$comment.is(":animated")){
if($comment.height()>50){
$comment.animate({height:"-=50"},400);
}
}
});
});
</script>
</head>
<body>
<form>
<div class="msg">
<div class="msg_caption">
<span class="bigger">放大</span>
<span class="smaller">缩小</span>
</div>
<div>
<textarea id="comment" rows="8" cols="20">
多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高
</textarea>
</div>
</div>
</form>
</body>
</html>如改变滚动条高度变化就使用scrollTop方法来进行处理
3.下拉框应用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>jQuery对表单的操作</title>
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
var $options=$('#select1 option:selected');
$options.appendTo("#select2");
});
$("#addAll").click(function(){
var $options=$('#select1 option');
$options.appendTo("#select2");
});
$("#select1").dblclick(function(){
var $options=$('option:selected',this);
$options.appendTo("#select2");
});
$("#remove").click(function(){
var $options=$('#select2 option:selected');
$options.appendTo("#select1");
});
$("#removeAll").click(function(){
var $options=$('#select2 option');
$options.appendTo("#select1");
});
$("#select2").dblclick(function(){
var $options=$('option:selected',this);
$options.appendTo("#select1");
});
});
</script>
</head>
<body>
<div class="centent">
<select multiple id="select1" style="width:100px;height:160px;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<div>
<span id="add">选中添加到右边>></span>
<span id="addAll">全部添加到右边>></span>
</div>
</div>
<div class="centent">
<select multiple id="select2" style="width:100px;height:160px;"></select>
<div>
<span id="remove"><<选中删除到左边</span>
<span id="removeAll"><<全部删除到左边</span>
</div>
</div>
</body>4.表单验证：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>jQuery对表单的操作</title>
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("form :input.required").each(function(){
var $required=$("<strong class='high'>*</strong>");
$(this).parent().append($required);//把它追加到文档中
});
$("form :input").blur(function(){
var $parent=$(this).parent();
$parent.find(".formtips").remove();
//验证用户名
if($(this).is("#username")){
if(this.value=""||this.value.length<6){
var errorMsg='请至少输入6位用户名';
$parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
}else{
var successMsg='输入正确';
$parent.append("<span class='formtips onSuccess'>"+successMsg+"</span>");
}
}
//验证邮箱
if($(this).is("#email")){
if(this.value=""||(this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
var errorMsg='请输入正确的Email地址';
$parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
}else{
var successMsg='输入正确';
$parent.append("<span class='formtips onSuccess'>"+successMsg+"</span>");
}
}
});
$("#send").click(function(){
$("form .required:input").trigger('blur');
var numError=$("form .onError").length;
if(numError){
return false;
}else{
alert("注册成功，密码已经发到邮箱，请查收");
}
});
});
</script>
<style type="text/css">
.high{
color:red;
}
</style>
</head>
<body>
<form method="post" action="">
<div class="int">
<label for="username">用户名：</label>
<input type="text" id="username" class="required" />
</div>
<div class="int">
<label for="email">邮箱：</label>
<input type="text" id="email" class="required" />
</div>
<div class="int">
<label for="personinfo">个人资料：</label>
<input type="text" id="personinfo"/>
</div>
<div class="sub">
<input type="button" value="提交" id="send" />
<input type="reset" id="res" />
</div>
</form>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- web前端之锋利的jQuery三：jQuery中的DOM操作
- web前端之锋利的jQuery八：jQuery插件的使用（表单验证、表单提交）
- web前端，jquery实现瀑布流总结5，jQuery CSS 操作 - css() 方法
- web前端之锋利的jQuery一：认识jQuery
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
- Web前端之jQuery 的10大操作技巧
- web前端之锋利的jQuery十一：综合开发，编写购物网首页
- 【Web前端学习笔记】EasyUI、JQuery表单验证
- WEB前端-JQuery-表单验证
- web前端之锋利的jQuery九：jQuery插件的使用（模态窗口、cookie、UI）
- web前端之锋利的jQuery四：jQuery中的事件
- Web前端——JQuery的进阶（测试使用 jQuery进行指定的操作）
- 打杂之WEB前端（二） jQuery 操作DOM总结，DOM Html操作，DOM Css操作
- web前端之锋利的jQuery七：jQuery表格应用、其他应用
- web前端入门：使用jQuery操作元素的属性与样式
- 锋利的jQuery读书笔记-第5章 jQuery对表单、表格的操作及更多应用
- 【web前端】Jquery操作cookie
- web前端之锋利的jQuery五：jQuery中的动画
- 打杂之WEB前端（一） jQuery 操作DOM总结，DOM Core操作
- 锋利的Jquery【读书笔记】 -- 第五章 jQuery对表单表格的操作