手機（文字方塊）：
<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
#
<script>
<script type="text/javascript">$(function(){
$("#textarea").blur(function(){
var strLen = $(this).val().replace(/[^\x00-\xff]/g,'__').length;
alert(strLen);
});
});</script>
<textarea>
</textarea>
以上是JavaScript中常用的form表單程式碼分享（收藏）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AMJavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。
C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AMC 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。
從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AMJavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。
Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AMPython更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。
C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AMC和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。
JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AMJavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。
JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AMJavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。
了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
刺客信條陰影：貝殼謎語解決方案
3 週前ByDDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前ByDDD
在哪裡可以找到原子中的起重機控制鑰匙卡
3 週前ByDDD
<🎜>：死鐵路 - 如何完成所有挑戰
4 週前ByDDD
Atomfall指南：項目位置，任務指南和技巧
1 個月前ByDDD
熱工具
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
Dreamweaver Mac版
視覺化網頁開發工具
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
