<form action="#" method="post" id="regFrom"> <fieldset> <legend>个人基本信息</legend> <div> <label for="username">名称:</label> <input id="username" type="text" /> </div> <div> <label for="pass">密码:</label> <input id="pass" type="passward" /> </div> <div> <label for="msg">详细信息:</label> <textarea id="msg" ></textarea> </div> </fieldset> </form>
.focus{
border: 1px solid #f00;
background: #fcc;
}
$(function(){
$(':input').focus(function(){
$(this).addClass('focus');
}).blur(function(){
$(this).removeClass('focus');
});
});
<form action="#" method="POST" id="regFrom"> <div class="msg"> <div class="msg_caption"> <span class="bigger">放大</span> <span class="small">缩小</span> </div> <div> <textarea id="comment" rows="8" cols="20"> 多行文本框,多行文本框,多行文本框,多行文本框,多行文本框,多行文本框,多行文本框,多行文本框,多行文本框,多行文本框,多行文本框,多行文本框,多行文本框,多行文本框,多行文本框,多行文本框,多行文本框,多行文本框,多行文本框, </textarea> </div> </div> </form>
$(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);
}
});
});
<form action="#" method="POST" id="regFrom"> <p>你爱好的运动</p> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球" />篮球 <input type="checkbox" name="items" value="羽毛球" />羽毛球 <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br /> <input type="button" id="CheckedAll" value="全 选" /> <input type="button" id="CheckedNo" value="全不选" /> <input type="button" id="CheckedRev" value="反 选" /> <input type="button" id="send" value="提 交" /> </form>
$('#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);
});
<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><br /> <span id="add_all">全部添加到右边>></span> </div> </div> <div class="centent"> <select multiple id="select2" style="width:100px;height:160px;"></select> <div> <span id="remove"><<选中删除到左边</span><br /> <span id="remove_all"><<全部删除到左边</span> </div> </div>
$('#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 methos="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="submit" value="提交" id="send" /> <input type="reset" id="red" /> </div> </form>
$('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 okMsg = '输入正确';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}
// 验证邮箱
if($(this).is('#email')){
if(this.value == '' || (this.value != "" && !/.+@.+\.[a-zA-Z] {2,4}$/.test(this.value))){
var errorMsg = '请输入正确的E-Mail地址';
$parent.append('<span class="formtips onError">'+errorMsg+' </span>');
}else{
var okMsg = '输入正确';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}
});
// 提交按钮
$('#send').click(function(){
$('form .required:input').trigger('blur');
var numError = $('form .onError').length;
if(numError){
return false;
}
alert("注册成功");
});
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有