正文
表单：!!!常用JS： form 表单代码
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
手机（文本框）：
<input type="text" name="" maxlength="11" placeholder="" autocomplete="off">
基本的表单验证 2016-3-8
<script>
$(function(){
$('.fr-form').submit(function(event){
event.preventDefault();//阻止表单提交事件
$(this).find('.error-tip').html('');
var name = $('.username');
var mobile = $('.mobile'); var regTest = /^1[3|4|5|7|8][0-9]{1}[0-9]{8}$|15[0-9]{1}[0-9]{8}$|18[0-9]{1}[0-9]{8}$/;
if(!name.val().length || name.val() == name.attr('data-value') ){alert('请填写姓名');return false;}
if(!mobile.val().length || mobile.val() == mobile.attr('data-value') ){alert('请填写电话');return false;}
if(!regTest.test( mobile.val() )){alert('电话格式不对');return false;} $.ajax({
url:'/signup',
type:'POST',
data:'realname='+name+'&mobile='+mobile+'&source=39',
dataType:'json',
success:function(data){
if(data.status == 1){
alert(data.msg);
}else{
alert('提交成功');
}
}
})
return false;
});
});
</script>
<form method="post" action="" class="fr-form">
<input type="text" class="input username" data-value="您的称呼" value="">
<input type="text" class="input mobile" data-value="您的电话" value="">
<p class="error-tip"></p>
<input type="submit" class="frformbtn" value="免费申请">
</form>
checkbox （复选框）取值
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#form").submit(function(){//表单提交:复选框取值
//var checkboxs = $('input[type="checkbox"]:checked');
var checkboxs = $('input[type="checkbox"][name="test"]:checked');
var checkboxs = $('input:checkbox[name="test"]:checked');
console.log("长度: "+checkboxs.length);
checkboxs.each(function(){
var s=$(this).val();
console.log(s);
});
console.log("------------");
var checkboxs=$('input:checkbox[name="test"]:checked');
for(i=0;i<checkboxs.length;i++){
console.log( $(checkboxs[i]).val());
} return false;
});
});
</script>
<form method="post" action="" id="form">
<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3">
<input type="checkbox" name="test" value="4">
<input type="checkbox" name="test" value="5">
<input type="submit">
<input type="reset">
</form>
radio（单选框）取值
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){ $("#form").submit(function(){//表单提交：单选框取值
var aaa=$('input:radio[name="aaa"]:checked').val();
alert(aaa);
return false;
});
});
</script>
<form method="post" action="" id="form">
<input type="radio" name="aaa" value="1" checked>
<input type="radio" name="aaa" value="2">
<input type="radio" name="aaa" value="3">
<input type="submit">
</form>
checkbox 选择所有（原生js）
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#check_all").click(function(){
var a=$(this)[0].checked;
//alert( typeof a);
var inputs = document.getElementsByTagName("input");
for(var i=0; i< inputs.length; i++){
if(inputs[i].type == "checkbox"){
inputs[i].checked = a;
}
}
});
});
</script>
<input type="checkbox" name="" id="check_all">选择所有
<hr>
<input type="checkbox" name=""><br>
<input type="checkbox" name=""><br>
<input type="checkbox" name=""><br>
<input type="checkbox" name=""><br>
checkbox 选择所有（jquery）
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#check_all").click(function(){
if($(this).is(":checked")){
$("input[name=aa]").prop("checked", true);
}else{
$("input[name=aa]").prop("checked", false);
}
});
});
</script> <input type="checkbox" name="" id="check_all">选择所有
<hr>
<input type="checkbox" name="aa"><br>
<input type="checkbox" name="aa"><br>
<input type="checkbox" name="aa"><br>
<input type="checkbox" name="aa"><br>
checkbox 勾选自己和下级所有子目录的复选框：.prop("checked",true); 2015-12-1
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("input[type=checkbox]").click(function(){
var s=$(this)[0].checked;
$(this).parent().find("input[type=checkbox]").prop("checked",s);
});
});
</script>
<ul>
<li><input type="checkbox" name="">
<ul>
<li><input type="checkbox" name=""></li>
<li><input type="checkbox" name=""></li> <li><input type="checkbox" name="">
<ul>
<li><input type="checkbox" name=""></li>
<li><input type="checkbox" name=""></li>
<li><input type="checkbox" name=""></li>
</ul>
</li>
</ul>
</li>
<li><input type="checkbox" name=""></li>
<li><input type="checkbox" name="">
<ul>
<li><input type="checkbox" name=""></li>
<li><input type="checkbox" name=""></li>
<li><input type="checkbox" name=""></li>
</ul>
</li>
</ul>
文本框的一个常用效果：
处于“焦点”状态时，是深色字。鼠标离开后，变成浅色字。
文本框没有填写时（或为空时），显示提示信息。已被填写后，文字颜色加深，并去掉提示信息。
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".input").blur(function(){
var _defalut = $(this)[0].defaultValue;
var _value = $(this).val();
if(_value==_defalut || _value ==""){
$(this).val(_defalut);
$(this).removeClass("cGray");
}else{
$(this).addClass("cGray");
}
});
$(".user-container .input").focus(function(){
var _defalut = $(this)[0].defaultValue;
var _value = $(this).val();
if(_value==_defalut){
$(this).val("");
}
});
});
</script>
<ul>
<li><input type="text" name="" class="input" value="手机号码 （填写手机号）"></li>
<li><input type="text" name="" class="input" value="密码 （6-16位数字、字母）"></li>
</ul>
textarea：
多行文本框 表单验证：2016-5-3
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//表单提交（实际是表单不提交，发ajax）
$('.questions-form').submit(function() {
event.preventDefault();//阻止表单提交事件
var _textarea = $('.questions-form').find('textarea');
var _str = $.trim(_textarea.val());
var _len = _str.replace(/[^\x00-\xff]/g, '__').length; if (_textarea.attr('data-value') == _str) {alert('请填写内容');return false;}
if (_len < 10) {alert('内容过短，长度应在10-500个字之间');return false;}
if (_len > 500) {alert('内容超长了，长度在10-500个字之间，现在已 ' + _len + ' 个英文字符长度');return false;}
//ajax..
return false;
});
});
</script>
<form method="post" class="questions-form">
<textarea name="" rows="6" cols="50"></textarea>
<input type="submit" value="提交" class="">
</form>
计算文本框的字符长度（1个汉字算2个英文字符长度） 2016-1-15
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#textarea").blur(function(){
var strLen = $(this).val().replace(/[^\x00-\xff]/g,'__').length;
alert(strLen);
});
});
</script>
<textarea id="textarea" rows="5" cols="66"></textarea>
<textarea spellcheck="true" > spellcheck属性是是否执行拼写检查（ie不兼容） 2016-6-12
限制文本框只允许输入数字： 2016-6-6
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//房屋结构: 室、厅、卫、厨房、阳台(限制只允许输入数字)
$(".ipt2").keyup(function(){
var _val = $(this).val();
//var _val = _val.replace(/[^\-?\d.]/g,'') //限制文本框只能输入正数，负数，小数
//var _val = _val.replace(/[^\d.]/g,'') //限制文本框只能输入正数，小数
var _val = _val.replace(/\D/g,'') //限制文本框只能输入数字
$(this).val(_val);
});
</script>
<input type="text" name="shi" value="2" autocomplete="off" maxlength="10" class="ipt2">
下拉框<optgroup>：
<select>
<optgroup label="Sirs">
<option value ="aaa">aaa</option>
<option value ="bbb">bbb</option>
</optgroup> <optgroup label="Cars">
<option value ="xxx">xxx</option>
<option value ="yyy">yyy</option>
</optgroup>
</select>
文本框（下拉提示）：
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
文本框（双击后将 placeholder 的值设为当前值）
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("input[type=text]").dblclick(function(){ /*双击后将placeholder的值设为当前值*/
if( $(this).val().length==0){
$(this).val($(this).attr('placeholder'));
}
});
});
</script>
<input type="text" value="" placeholder="hidden">
http://bbs.csdn.net/topics/390643757 HTML5 表单详解
confirm:
<script type="text/javascript">
$(function(){
$("#list_form").submit(function(){//表单提交:
if ( confirm("确定删除已选中的信息吗？") ){
return true;
}else{
return false;
}
});
});
</script>
序列化表单值： 2016-4-13
<script type="text/javascript">
$(function(){
$("form").submit(function(){
event.preventDefault();//阻止表单提交事件
var s=$('form').serialize();//序列化表单值
alert(s);
});
});
</script>
<form method="post" action="">
<input type="text" name="uname" value="aaa">
<input type="text" name="city" value="beijing">
<input type="submit" value="" class="">
</form>
JSON对象 < == > JSON字符串， 互相转换： 2016-5-27
注：ie8(兼容模式),ie7和ie6没有JSON对象，推荐采用JSON官方的方式，引入json.js。
var s1={a:1,b:2,c:333}
var s2=JSON.stringify(s1); //将json对象转为字符串
var s3=JSON.parse(s2); //将json字符串转为json对象
var itemlist = {a:1,b:2,c:3,d:4}
itemlist = JSON.parse(JSON.stringify(itemlist ));
console.log(itemlist);
上传按钮（改变传统外观） [重要] 2016-6-3改动
<!-- 上传按钮（改变传统上传按钮外观） -->
<style type="text/css">
.filebtn-box {position:relative;width:120px;height:120px;overflow:hidden;} /* 总容器 */
.filebtn-hide{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;z-index:2;
font-size:1000px;opacity:0;filter:alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}/* 放在上层的透明的上传控件 */
.filebtn-img{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;z-index:1;} /* 用图片替代上传控件 */
.filebtn-ipt{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;z-index:1;
border:1px solid #ccc;background:#f8f8f8;color:#666;text-align:center;font-size:14px;font-weight:bold;border-radius:4px;} /* 用按钮替代上传控件 */
</style>
<div class="filebtn-box">
<input type="file" name="uploadimg" class="filebtn-hide">
<img src="http://pic.58pic.com/58pic/14/73/88/32x58PICwrz_1024.jpg" class="filebtn-img">
</div>
<hr>
<div class="filebtn-box">
<input type="file" name="uploadimg" class="filebtn-hide">
<input type="button" name="" class="filebtn-ipt" value="本地上传">
</div>
下拉选择弹出层 2016-4-1
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//房屋类型(弹出层)
$(".js-housetype-btn").click(function(){
$('.housetype-dropbox .absbox').slideToggle(200);
});
$(".housetype-dropbox .housetype-option").click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('.js-housetype-btn').find('.ipt').val($(this).html());
$('.housetype-dropbox .absbox').slideUp(500);
});
});
</script>
<style type="text/css">
ul,li{margin:0;padding:0;list-style:none;}
dl,dt,dd,p{margin:0;padding:0;}
.l{float:left;}
.ipt-line{width:310px;height:42px;padding:0 25px;font-size:14px;line-height:42px;}
.ipt-line > dt{position:relative;float:left;color:#333;width:68px;height:42px;font-weight:bold;}
.ipt-line > dd{position:relative;float:left;color:#999;width:240px;height:42px;}
.ipt-line .ipt{display:block;color:#999;line-height:42px;height:42px;border:none;}
.ipt-line .js-area-btn{width:240px;height:42px;cursor:pointer;}
.js-housetype-btn .ipt{width:5em;}
.js-housetype-btn .housetype-icon{margin-top:20px;}
.housetype-dropbox{position:relative;height:0;}/* 房屋类型选择面板 */
.housetype-dropbox .absbox{position:absolute;display:none;left:0;top:0;width:323px;padding:14px 0 0 35px;background:#fff;border:1px solid #ececec;box-shadow:0 2px 10px #ccc;z-index:1;}
.housetype-dropbox .absbox .housetype-option{float:left;width:86px;height:28px;line-height:28px;background:#f1f1f1;color:#666;margin:0 10px 12px 0;text-align:center;cursor:pointer;}
.housetype-dropbox .absbox .housetype-option.active{background:#eb5405;color:#fff;}
</style>
<dl class="ipt-line clearfix">
<dt class="l">类型</dt>
<dd class="l js-housetype-btn"><input type="text" name="housetype" value="普通住宅" class="ipt l" disabled></dd>
</dl>
<!-- 下拉选择面板 start -->
<div class="housetype-dropbox">
<ul class="absbox">
<li class="housetype-option active">普通住宅</li>
<li class="housetype-option">别墅</li>
<li class="housetype-option">公寓</li>
<li class="housetype-option">小户型</li>
</ul>
</div>
<!-- 下拉选择面板 end -->
判断是否隐藏：
（也放在这里一份代码吧，方便查找。）
//jquery的写法：
var _pop = $(".list-pop[data-pop="+_index+"]");
if( _pop.is(":hidden") == false ){//已显示的关闭
_pop.hide();
}else{
_pop.show();
}
//zepto支持的写法：
var _pop = $(".list-pop").eq(_index);
if( _pop.css("display") == "none" ){//已显示的关闭
_pop.show();
}else{
_pop.hide();
}
.。。。
