JavaScript でよく使用されるフォームコード共有 (コレクション)-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript でよく使用されるフォームコード共有 (コレクション)

黄舟

Jul 24, 2017 am 10:12 AM

formjavascriptjs

Mobile (テキストボックス):

<input type="text" name="" maxlength="11" placeholder="" autocomplete="off">

基本的なフォーム検証

<script>$(function(){
    $(&#39;.fr-form&#39;).submit(function(event){
        event.preventDefault();//阻止表单提交事件        
        $(this).find(&#39;.error-tip&#39;).html(&#39;&#39;);        
        var name = $(&#39;.username&#39;);        
        var mobile = $(&#39;.mobile&#39;);        
        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(&#39;data-value&#39;) ){alert(&#39;请填写姓名&#39;);return false;}        
        if(!mobile.val().length || mobile.val() == mobile.attr(&#39;data-value&#39;) ){alert(&#39;请填写电话&#39;);return false;}        
        if(!regTest.test( mobile.val() )){alert(&#39;电话格式不对&#39;);return false;}
        $.ajax({
            url:&#39;/signup&#39;,
            type:&#39;POST&#39;,
            data:&#39;realname=&#39;+name+&#39;&mobile=&#39;+mobile+&#39;&source=39&#39;,
            dataType:&#39;json&#39;,
            success:function(data){                if(data.status == 1){
                    alert(data.msg);
                }else{
                    alert(&#39;提交成功&#39;);
                }
            }
        })        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 = $(&#39;input[type="checkbox"]:checked&#39;);
        var checkboxs = $(&#39;input[type="checkbox"][name="test"]:checked&#39;);        
        var checkboxs = $(&#39;input:checkbox[name="test"]:checked&#39;);
        console.log("长度: "+checkboxs.length);
        checkboxs.each(function(){            
        var s=$(this).val();
            console.log(s);
        });
        console.log("------------");        
        var checkboxs=$(&#39;input:checkbox[name="test"]:checked&#39;);        
        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=$(&#39;input:radio[name="aaa"]:checked&#39;).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>

チェックボックスですべて選択（ネイティブ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>

チェックボックスですべて選択（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>

チェックボックス自分自身をチェックし、以下のすべてのサブディレクトリのチェックボックスをオンにします。 .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）    
$(&#39;.questions-form&#39;).submit(function() {
        event.preventDefault();//阻止表单提交事件
        var _textarea = $(&#39;.questions-form&#39;).find(&#39;textarea&#39;);        
        var _str = $.trim(_textarea.val());        
        var _len = _str.replace(/[^\x00-\xff]/g, &#39;__&#39;).length;        
        if (_textarea.attr(&#39;data-value&#39;) == _str) {alert(&#39;请填写内容&#39;);return false;}        
        if (_len < 10) {alert(&#39;内容过短，长度应在10-500个字之间&#39;);return false;}        
        if (_len > 500) {alert(&#39;内容超长了，长度在10-500个字之间，现在已 &#39; + _len + &#39; 个英文字符长度&#39;);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>
<script type="text/javascript">$(function(){
    $("#textarea").blur(function(){        
    var strLen = $(this).val().replace(/[^\x00-\xff]/g,&#39;__&#39;).length;
        alert(strLen);
    });
});</script>
<textarea>
</textarea>

Spellcheck 属性は、スペルチェックを実行するかどうかです (つまり、互換性がありません) 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,&#39;&#39;)    
//限制文本框只能输入正数，负数，小数
        //var _val = _val.replace(/[^\d.]/g,&#39;&#39;)    
         //限制文本框只能输入正数，小数
        var _val = _val.replace(/\D/g,&#39;&#39;)    　　  
        //限制文本框只能输入数字        
        $(this).val(_val);
    });
    </script>
    <input type="text" name="shi" value="2" autocomplete="off" maxlength="10" class="ipt2">

ドロップダウンボックス :

<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>

テキストボックス (ダブルクリックして、プレースホルダーの値を現在の値に設定します)

<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(&#39;placeholder&#39;));
        }
    });
});</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=$(&#39;form&#39;).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 文字列、相互変換:

注: 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  class="filebtn-img lazy"  src="/static/imghwm/default1.png"  data-src="http://pic.58pic.com/58pic/14/73/88/32x58PICwrz_1024.jpg"    alt="JavaScript でよく使用されるフォーム コード共有 (コレクション)" ></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

Rrree

(も入れてください)簡単に検索できるように、ここにコードをコピーします。)

<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(){
        $(&#39;.housetype-dropbox .absbox&#39;).slideToggle(200);
    });
    $(".housetype-dropbox .housetype-option").click(function(){
        $(this).addClass(&#39;active&#39;).siblings().removeClass(&#39;active&#39;);
        $(&#39;.js-housetype-btn&#39;).find(&#39;.ipt&#39;).val($(this).html());
        $(&#39;.housetype-dropbox .absbox&#39;).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 -->

以上がJavaScript でよく使用されるフォームコード共有 (コレクション)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

JavaScriptをインストールするにはどうすればよいですか？Apr 05, 2025 am 12:16 AM

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1）ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2）node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、