详解jQuery简单的表单应用

 

 
个人基本信息
 

 名称：
 
 
 

 密码：
 
 
 

 详细信息：
 
 
 
 

.focus{
 border: 1px solid #f00;
 background: #fcc;
 }

$(function(){
 $(':input').focus(function(){
 $(this).addClass('focus');
 }).blur(function(){
 $(this).removeClass('focus');
 });
 });

 

 

 放大
 缩小
 
 

   多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，
 
 
 
 

$(function(){
 var $comment = $('#comment');
 $('.bigger').click(function(){
 if($comment.height() <500){
 $comment.height( $comment.height() + 50 );
 }
 });
 $('.small').click(function(){
 if($comment.height() > 50){
 $comment.height( $comment.height() - 50 ); 
 }
 });
 });

$(function(){
 var $comment = $('#comment');
 $('.bigger').click(function(){
 if(!$comment.is(':animated')){
 $comment.animate({scrollTop : '-=50'},400);
 }
 });
 $('.small').click(function(){
 if(!$comment.is(':animated')){
 $comment.animate({scrollTop : '+=50'},400);
 }
 });
 });

 
你爱好的运动
 足球
 篮球
 羽毛球
 乒乓球
 

 
 
 
 
 

$('#CheckedAll').click(function(){
 $('[name=items]:checkbox').attr('checked',true);
 });
 $('#CheckedNo').click(function(){
 $('[name=items]:checkbox').attr('checked',false);
 });

 $('#CheckedRev').click(function(){
 $('[name=items]:checkbox').each(function(){
 this.checked = !this.checked;
 });
 });

var str = "你选中的是：\r\n";
 $('#send').click(function(){
 
 $('[name=items]:checkbox:checked').each(function(){
 str += $(this).val() + "\r\n";
 });
 alert(str);
 });

 
 选项1
 选项2
 选项3
 选项4
 选项5
 选项6
 选项7
 选项8
 
 

 选中添加到右边>>

 全部添加到右边>>
 
 
 

 
 

 <<选中删除到左边

 <<全部删除到左边
 
 

 $('#add').click(function(){
 var $optiOns= $('#select1 option:selected');
 $options.appendTo($('#select2'));
 });

 $('#add_all').click(function(){
 var $optiOns= $('#select1 option');
 $options.appendTo($('#select2'));
 });

$('#select1').dblclick(function() {
 var $optiOns= $('option:selected');
 $options.appendTo($('#select2'));
 });

 

 用户名
 
 
 

 邮箱
 
 
 

 个人资料
 
 
 

 
 
 
 

$('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(''+errorMsg+' ');
 }else{
  var okMsg = '输入正确';
  $parent.append(''+okMsg+'');
 }
 }
 // 验证邮箱
 if($(this).is('#email')){
 if(this.value == '' || (this.value != "" && !/.+@.+\.[a-zA-Z] {2,4}$/.test(this.value))){
  var errorMsg = '请输入正确的E-Mail地址';
  $parent.append(''+errorMsg+' ');
 }else{
  var okMsg = '输入正确';
  $parent.append(''+okMsg+'');
 }
 }
 });

// 提交按钮
 $('#send').click(function(){
 $('form .required:input').trigger('blur');
 var numError = $('form .onError').length;
 if(numError){
  return false;
 }
 alert("注册成功");
 });