Rumah >hujung hadapan web >tutorial js >JavaScript中常用的form表单代码分享（收藏）
JavaScript中常用的form表单代码分享（收藏）
- 黄舟asal
- 2017-07-24 10:12:422270semak imbas
手机（文本框）：
<input type="text" name="" maxlength="11" placeholder="" autocomplete="off">
基本的表单验证
<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="
</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="
</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="
</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="
</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="
</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="
</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="
</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
9dd4e74599c2814fa7e1870628278dc5
8019067d09615e43c7904885b5246f0a$(function(){
$("#textarea").blur(function(){
var strLen = $(this).val().replace(/[^\x00-\xff]/g,'__').length;
alert(strLen);
});
});2cacc6d41bbb37262a98f745aa00fbf0
f9b593c2e93d9b585f67a6d67478e8ee
40587128eee8df8f03d0b607fe983014
4389ac81d38fd1c4d6ed91599599ef48 spellcheck属性是是否执行拼写检查（ie不兼容） 2016-6-12
限制文本框只允许输入数字： 2016-6-6
<script type="text/javascript" src="
</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">下拉框5b7a15bed8615d1b843806256bebea72：
<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">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对象 7e86220f02db10634a6a67f8dcda189d JSON字符串， 互相转换：
注：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对象上传按钮（改变传统外观） [重要] 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>
<p 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"></p><hr><p class="filebtn-box">
<input type="file" name="uploadimg" class="filebtn-hide">
<input type="button" name="" class="filebtn-ipt" value="本地上传"></p>下拉选择弹出层 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 -->判断是否隐藏：
（也放在这里一份代码吧，方便查找。）
var s1={a:1,b:2,c:333}
var s2=JSON.stringify(s1); //将json对象转为字符串
var s3=JSON.parse(s2); //将json字符串转为json对象
Atas ialah kandungan terperinci JavaScript中常用的form表单代码分享（收藏）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：javascript如何实现div模块用鼠标拖动实例代码详解Artikel seterusnya：javascript如何操作cookie来实现用户登录代码实例详解
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional