Question

<!DOCTYPE html>
<html>
<head>
<script>
function validateAlphaNumeric()
{
alert("function start");
var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var numbers="0123456789";
var flag=true;
var prod_id=document.getElementByID("productid").value;
alert(prod_id);
for(var i=0;i<prod_id.length;i++)
{
if(alphabets.indexOf(prod_id.charAt(i))==-1 || numbers.indexOf(prod_id.charAt(i)==-1)
{
alert("value must be alphanumeric");
break;
}
}


var prod_type=document.myform.producttype.value;
for(var i=0;i<prod_type.length;i++)
{
if(alphabets.indexOf(prod_type.charAt(i))==-1 || numbers.indexOf(prod_type.charAt(i)==-1)
{
alert("value must be alphanumeric");
break;
}
}
}
</script>
</head>
<body>

<form name="myform" action="http://localhost:8080/examples/Submit.HTML" method="POST">

<br><br>
Prodcut ID:<input type="text" name="productid" id="productid" size="25" ">
<br><br>
Product Type:<input type="text" name="producttype" id="producttype" size="25" ">
<br><br>
</div>

<input type="submit"  onclick="validateAlphaNumeric()" value="Submit">
</form>
</body>
</html>

这是一个测试页面，只是为了学习基础知识。当我按下提交时，没有检查发生，它转到Submit.html page.why？这需要什么修改？

<input type="submit"  onclick="validateAlphaNumeric()" value="Submit">

按下此按钮时会发生什么？

var prod_id=document.getElementByID("productid").value;

  var prod_type=document.myform.producttype.value;

这两种机制是一样的吗？

This is the Modified one.But still not working. Please help

<!DOCTYPE html>
<html>
<head>
<script>
function validateAlphaNumeric()
{

var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var numbers="0123456789";
var flag=true;
var prod_id=document.getElementByID("productid").value;

for(var i=0;i<prod_id.length;i++)
{
if(alphabets.indexOf(prod_id.charAt(i))==-1 && numbers.indexOf(prod_id.charAt(i)==-1))
{
alert("value must be alphanumeric");
return false;
}
}


var prod_type=document.myform.producttype.value;
for(var i=0;i<prod_type.length;i++)
{
if(alphabets.indexOf(prod_type.charAt(i))==-1 && numbers.indexOf(prod_type.charAt(i)==-1))
{
alert("value must be alphanumeric");
return false;
}
}
}
</script>
</head>
<body>

<form name="myform" action="http://localhost:8080/examples/Submit.HTML" method="POST">

<br><br>
Prodcut ID:<input type="text" name="productid" id="productid" size="25" ">
<br><br>
Product Type:<input type="text" name="producttype" id="producttype" size="25" ">
<br><br>
</div>

<input type="submit"  onclick="validateAlphaNumeric(); " value="Submit">
</form>
</body>
</html>

Answer 1

你忘记了if语句的右括号：

<!DOCTYPE html>
<html>
<head>
<script>
function validateAlphaNumeric()
{
alert("function start");
var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var numbers="0123456789";
var flag=true;
var prod_id=document.getElementByID("productid").value;
alert(prod_id);
for(var i=0;i<prod_id.length;i++)
{
if(alphabets.indexOf(prod_id.charAt(i))==-1 && numbers.indexOf(prod_id.charAt(i)==-1))
{
alert("value must be alphanumeric");
break;
}
}


var prod_type=document.myform.producttype.value;
for(var i=0;i<prod_type.length;i++)
{
if(alphabets.indexOf(prod_type.charAt(i))==-1 && numbers.indexOf(prod_type.charAt(i)==-1))
{
alert("value must be alphanumeric");
break;
}
}
}
</script>
</head>
<body>

<form name="myform" action="" method="POST">

<br><br>
Prodcut ID:<input type="text" name="productid" id="productid" size="25" ">
<br><br>
Product Type:<input type="text" name="producttype" id="producttype" size="25" ">
<br><br>
</div>

<input type="submit"  onclick="validateAlphaNumeric()" value="Submit">
</form>
</body>
</html>

Answer 2

如果你想要没有去行动页面你必须在 onclick 结尾处加返回false;

onclick="validateAlphaNumeric();return false;"

或将返回false; 放在您使用返回false的函数结尾处; ，您说浏览器不提交

Answer 3

尝试在验证失败时返回false

这个onclick出了点问题

3 个答案: