Rumah > Artikel > hujung hadapan web > JavaScript中常用的form表单代码分享(收藏)
手机(文本框):
<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!