Javascript表单验证

我试图做一个简单的表单验证，但它不工作，我想要的方式。它应该做的是，如果字段的边界有效/无效，并且文本在其下是正确的或不正确的，字段的边界应变为绿色/红色。电子邮件部分是唯一一个正在工作的方式。
Javascript表单验证

<!DOCTYPE html> 
<html> 
<meta charset="utf-8"> 
<head> 
</head> 
<body> 
<script> 

function emailcheck(){ 
    var string1=document.example.email.value 
    if (string1.indexOf("@")==-1){ 
     document.getElementById ("result").innerHTML = "Email nicht korrekt"; 
     document.getElementById ("result").style.color = "#ff0000"; 
     document.getElementById ("emailinput").style.borderColor = "red"; 
    } 
    else{ 
     document.getElementById ("result").innerHTML = "Email korrekt"; 
     document.getElementById ("result").style.color = "#11aa55"; 
     document.getElementById ("emailinput").style.borderColor = "green"; 
     } 
} 
function namecheck(){ 
    var string2=document.example.name.value 
    if /*(something that defines letters?)*/{ 
     document.getElementById ("result2").innerHTML = "Name nicht korrekt"; 
     document.getElementById ("result2").style.color = "#ff0000"; 
     document.getElementById ("nameinput").style.borderColor = "red"; 
    } 
    else{ 
     document.getElementById ("result2").innerHTML = "Name korrekt"; 
     document.getElementById ("result2").style.color = "#11aa55"; 
     document.getElementById ("nameinput").style.borderColor = "green"; 
     } 
} 
function telcheck(){ 
    var string3=document.example.tel.value 
    if /*(something that defines numbers?)*/{ 
     document.getElementById ("result3").innerHTML = "Tel nicht korrekt"; 
     document.getElementById ("result3").style.color = "#ff0000"; 
     document.getElementById ("telinput").style.borderColor = "red"; 
    } 
    else{ 
     document.getElementById ("result3").innerHTML = "Tel korrekt"; 
     document.getElementById ("result3").style.color = "#11aa55"; 
     document.getElementById ("telinput").style.borderColor = "green"; 
     } 
} 
</script> 
<center> 
<form name="example"><input id="emailinput" type="text" style="border:1px solid" size="20" name="email" placeholder="Your Email" onblur="emailcheck()"> 
<p id="result"></p> 
<input id="nameinput" type="text" style="border:1px solid" size="20" name="name" placeholder="Your Name" onblur="namecheck()"> 
<p id="result2"></p> 
<input id="telinput" type="text" style="border:1px solid" size="20" name="tel" placeholder="Please like 123456" onblur="telcheck()"> 
<p id="result3"></p> 
<input type="submit" value="Submit"> 
</form> 
</center> 
</body> 
</html>

来源

2016-11-17 Lani

你可以添加标记 – Geeky

你的'nameinput'是在一个名为'example2'的格式中，而不是'example'。 – Hamms

您可能会考虑使用CSS样式表，而不是像您一样使用内嵌样式。 CSS还可以通过'：invalid'伪类来定位无效字段。 –

你必须使用正则表达式。

其次如果必须是这样的

var regex1 = /^[a-zA-Z]*$/; //only letters 
var length = string2.length; //if this equals to 0 then user didn't type anything 
if(!regex1.test(string2) || length < 1){ ... }

;第三这样

var regex2 = /^\d+$/; //only numbers 
if(!regex2.test(string3)){ ... }

有关更多信息，请here。

来源

2016-11-17 23:03:00

它看起来就像你在你的2个错误：

if/*(something that defines numbers?)*/{..

用于测试目的，将其更改为

if (true)/*(something that defines numbers?)*/{..

来源

2016-11-17 23:02:43 RizkiDPrast

Javascript表单验证

回答

相关问题