Javascript 使用java脚本验证html表单
我是js[客户端脚本]新手 我之前在php上工作过，现在我想我需要在我的应用程序中使用js，这里有一个很小的代码Javascript 使用java脚本验证html表单,javascript,php,jquery,html,forms,Javascript,Php,Jquery,Html,Forms,我是js[客户端脚本]新手 我之前在php上工作过，现在我想我需要在我的应用程序中使用js，这里有一个很小的代码 <form name = "Purchase" action = "purchase.php" method = "POST"> <select name = "pname"> <option value = "p1"> p1 </option> <option value = "p2"> p2 </option>
<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>
p1
p2
<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>
函数validateForm（objForm）
{
var returnStatus=1；
if（objForm.Make.selectedIndex==0）
{
警报（“请选择所有选择选项”）；
returnStatus=0；
};
如果（返回状态）
{
objForm.submit（）；
}
}
<input type = "submit" name = "NewPurchase" Value = "Add" onClick="validateForm(document.testform)">
请告诉我如何在js中使用相同的选项。您没有关闭select，因此您的select将如下所示：
<select name = "pname" id="pname">
<option value = "p1"> p1 </option>
<option value = "p2"> p2 </option>
</select>
onsubmit="return validateForm();"
isset（）您可以使用html5中的user required=“required”，不允许用户提交表单而不在字段中添加一些值。基本上我不建议使用警报（）。当然，它们很好，并且完全履行了自己的职责，但它们也几乎屏蔽了浏览器的其余部分
<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>
函数validateForm（e）{
var tStatus=1；
如果（e）{
var tE=e.parentNode；//获取表单容器。
var tL=document.querySelectorAll（“[required]”）；//获取所需元素；
对于（var i=0，j=tL.length；iOP还询问一个isset（）
在PHP中，您可以扩展吗？@随机更改我的答案也可以查看一下，JQuery验证插件为什么不只依赖HTML5客户端验证？@EJTH:可以，但我们可能不确定客户端可以使用哪个版本，如果是HTML4，这意味着会有问题。谢谢，在validateform函数中，我们可以让SELECT标记condit吗使用值而不是“选择第一个选项”？当然，这是获取值的方式：tL[i]。选项[tL[i]。selectedIndex]。值
<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>