首頁 > 開發者 > JavaScript
一個檢測表單資料的JavaScript執行個體，表單javascript執行個體
一個檢測表單資料的JavaScript執行個體，很簡單，很實用，感興趣的朋友可以看看
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一個JavaScript執行個體-檢測表單資料</title> <style> [role="alert"]{ background-color: #fcc; font-weight: bold; padding:5px; border:1px dashed #000; } div{ margin:10px 0; padding:5px; width:400px; background-color: #fff; } </style> <script> window.onload = function(){ document.getElementById("thirdfield").onchange = validateField; document.getElementById("firstfield").onblur = mandatoryField; document.getElementById("testform").onsubmit = finalCheck; } function validateField(){ removeAlert(); if(!isNaN(parseFloat(this.value))){ resetField(this); }else{ badField(this); generateAlert("You entered an invalid value in Third Field. only numeric values such as 105 or 3.45 are allowed"); } } function removeAlert(){ var msg = document.getElementById("msg"); if(msg){ document.body.removeChild(msg); } } function resetField(elem){ elem.parentNode.setAttribute("style","background-color:#fff"); var valid = elem.getAttribute("aria-invalid"); if(valid) elem.removeAttribute("aria-invalid"); } function badField(elem){ elem.parentNode.setAttribute("style","background-color#fee"); elem.setAttribute("aria-invalid","true"); } function generateAlert(txt){ var txtNd = document.createTextNode(txt); msg = document.createElement("div"); msg.setAttribute("role","alert"); msg.setAttribute("id","msg"); msg.setAttribute("class","alert"); msg.appendChild(txtNd); document.body.appendChild(msg); } function mandatoryField(){ removeAlert(); if(this.value.length > 0 ){ resetField(this); }else{ badField(this); generateAlert("You must enter a value into First Field"); } } function finalCheck(){ //console.log("aaa"); removeAlert(); var fields =document.querySelectorAll('input[aria-invalid="true"]'); //var fields =document.querySelectorAll("input[aria-invalid='true']");//錯誤！！！ console.log(fields); if(fields.length > 0){ generateAlert("You have incorrect fields entries that must be fixed before you can submit this form"); return false; } } </script> </head> <body> <form id = "testform"> <div> <label for="firstfield">*first Field:</label><br /> <input id="firstfield" name = "firstfield" type = "text" aria-required = "true" /> </div> <div> <label for="secondfield">Second Field:</label><br /> <input id="secondfield" name = "secondfield" type = "text" /> </div> <div> <label for="thirdfield">Third Field(numeric):</label><br /> <input id="thirdfield" name = "thirdfield" type = "text" /> </div> <div> <label for="fourthfield">Fourth Field:</label><br /> <input id="fourthfield" name = "fourthfield" type = "text" /> </div> <input type="submit" value = "Send Data" /> </form> </body> </html>
回答
一：不明白你問的是什麼，如果是只顯示文字不顯示輸入框的話，可以使用DIV，SPAN，P等其它容器來進行提示，或者用CSS把輸入框的外框去掉；
二：你的函數Test沒有傳回值，也沒有在onsubmit中使用test函數。
把你的代碼改了改，你試下：
<script language="javascript">
function test()
{
if(document.form1.username.value.length<6){
document.getElementById("x").innerHTML = "使用者名稱不能少於6個字元！";//x是一個層
return false;
}else{
document.getElementById("x").innerHTML="";
}
if(document.form1.userpass.value.length<6){
document.getElementById("y").innerHTML="密碼不能少於6個字元！";
return false;
}else{
document.getElementById("y").innerHTML="";
}
}
</script>
<form id="form1" name="form1" method="post" action="baidu.com" onsubmit="return test()">
<p>
<input name="username" type="text" id="username" onblur="return test()" />
<div id="x"></div>
</p>
<p>
<input name="userpass" type="text" id="userpass" onblur="return test()" />
<div id="y"></div>
</p>
<p>
<input type="submit" name="Submit" value="提交" />
</p>
</form>...餘下全文>>
javascript 檢測表單內容
<!------------------------------------------------------
我把函數給你做好了，你自己加在頁面上就可以了。
實現的功能：
對於頁面上的多組單選鈕，自動分組檢查以保證每組有一個要選中；對於單選鈕後跟有文字框的，還要去除文字框內的空白，再檢查文字框內容是否有效。
對於多選鈕，只要整體範圍內查是否有一個被選中。
這樣設計的原因是單選鈕是按名字自動分組的，而你多選框可以任起名字的。所以只能整體檢查多選框。
特色：你不必改你頁面上任何內容，不必為了My Code設定每個單選鈕的name或ID，檢查工作將自動進行到表單中的每一個單選鈕或複選框，而且你可以隨便加、減單選鈕和複選框，代碼不用做任何變化！通用的！
///////////////////////////////////////////////////////////////-->
function ElementsGroup() {
var group = [];
this.add = function(element) {
var i;
for (i = group.length - 1; i >= 0; i--) {
if (group[i][0].name == element.name) break;
}
if (i < 0) {
i = group.push([]) - 1;
}
group[i].push(element);
}
this.getGroup = function(name) {
for (var i = group.length - 1; i >= 0; i--) {
if (group[i][0].name == name) return group[i];
}
return null;
}
}
function check() {
var radios = new ElementsGroup(), checkboxes = [], radioNames = [];
var elements = event.srcElement.getElementsByTagName(&qu......餘下全文>>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
