gpt4 book ai didi

javascript - 使用 javascript 验证 html 表单

转载 作者:行者123 更新时间:2023-11-30 16:50:30 25 4
gpt4 key购买 nike

我是 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com