我是 js 新手 [客户端脚本]
我之前在 php 上工作，现在我想我需要为我的应用程序使用 js，这里有一个小代码。
<form name = "Purchase" action = "purchase.php" method = "POST">
<select name = "pname">
<option value = "p1"> p1 </option>
<option value = "p2"> p2 </option>
<input type = "number" name = "price" required></input>
<input type = "number" name = "Total" required></input>
<input type = "submit" name = "NewPurchase" Value = "Add">
</form>
我想验证是否设置了所有值，主要是 下拉 在表单中，如果未选择，则应显示警告消息，说明未选择值 我已经修改了相同的内容文件如下所示，但不起作用。
<SCRIPT LANGUAGE="JavaScript">
function validateForm(objForm)
{
var returnStatus = 1;
if (objForm.Make.selectedIndex == 0)
{
alert("Please select a all select options");
returnStatus = 0;
};
if (returnStatus)
{
objForm.submit();
}
}
</script>
也将输入提交标签修改为
<input type = "submit" name = "NewPurchase" Value = "Add" onClick="validateForm(document.testform)">
目前我正在使用 isset() 在下一页 ["purchase.php"] 中使用 php 验证所有值
请告诉我如何在 js 中使用它。
最佳答案
基本上我不会推荐 alerts()。当然他们很好并且履行了他们的职责，但他们也几乎阻止了浏览器的其余部分。
<html>
<head>
<Script>
function validateForm(e){
var tStatus = 1;
if (e){
var tE = e.parentNode; //Getting the form container.
var tL = document.querySelectorAll('[required]'); //Get required elements;
for(var i=0, j=tL.length;i<j;i++){
tL[i].style.backgroundColor = '#ffffff'; //Reseting our error marks.
if (tL[i].tagName === 'SELECT' && tL[i].selectedIndex === 0){
//For dropdowns, we check if not the first option is selected
var tStatus = 0;
tL[i].style.backgroundColor = 'crimson';
//alert('..') //Can put alerts instead, but alerts are rarely a good option
}
else if (tL[i].tagName === 'INPUT' && tL[i].type == 'number' && (tL[i].value.trim() === '' || isNaN(tL[i].value))){
//For number input, we check if a value is entered which is a number.
var tStatus = 0;
tL[i].style.backgroundColor = 'crimson';
//alert('..') //Can put alerts instead, but alerts are rarely a good option
}
else if (tL[i].tagName === 'INPUT' && tL[i].type == 'text' && tL[i].value.trim() === ''){
//For input, we check if any text is entered which is not only whitespaces.
var tStatus = 0;
tL[i].style.backgroundColor = 'crimson';
//alert('..') //Can put alerts instead, but alerts are rarely a good option
};
};
};
//Proceed how ever you want with your status [0|1]
return (tStatus === 1);
};
</Script>
</head>
<body>
<form name = "Purchase" action = "purchase.php" method = "POST">
<select name = "pname" required>
<option value = "p1"> p1 </option>
<option value = "p2"> p2 </option>
</select> <!-- Close the select? -->
<input type = "text" name = "text" required></input>
<input type = "number" name = "Total" required></input>
<input type = "number" name = "Total" required></input>
<input type = "submit" name = "NewPurchase" Value = "Add" onsubmit="return validateForm(this)">
</form>
</body>
</html>
关于javascript - 使用 javascript 验证 html 表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30591642/