纯javascript验证_Javascript - Fatal编程技术网

纯javascript验证

javascript

纯javascript验证,javascript,Javascript,我厌倦了做有效的电子邮件和必填字段验证，但有了这个功能，我只想用纯JavaScript来做，它只显示必需的em <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

我厌倦了做有效的电子邮件和必填字段验证，但有了这个功能，我只想用纯JavaScript来做，它只显示必需的em

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JS valdation</title>
    <script type="text/javascript">
        function validateForm() {
            var email = document.getElementById('emailaddress');
            var name = document.getElementById('username');
            var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if (email.value == "" || name.value == "") {
                document.getElementById("required").style.display = "block";
                document.getElementById("required_email").style.display = "block";
                document.getElementById("valide_email").style.display = "none";
            }
            else if(!filter.test(email.value)) {
                document.getElementById("valide_email").style.display = "block";
                document.getElementById("required").style.display = "none";
            }
            return false;
        }
    </script>
</head>
<body>
<form name="myForm" action="" onsubmit="return validateForm();" method="post">
Email: <input id="emailaddress" type="text" name="email">
<input type="submit" value="Submit">
<em id="valide_email" style="display:none">please enter a valid email ex:(user@user.com)</em>
<em id="required_email" style="display:none">this filed is required</em>
First name: <input id="username" type="text" name="fname">
<em id="required" style="display:none">this filed is required</em>
</form>
</body>
</html>


JS valdation
函数validateForm（）{
var email=document.getElementById（'emailaddress'）；
var name=document.getElementById（'username'）；
变量过滤器=/^（[a-zA-Z0-9\.\-]）+\@（[a-zA-Z0-9\-]）+\）+（[a-zA-Z0-9]{2,4}）+$/；
如果（email.value==“”| | name.value==“”）{
document.getElementById（“必需”）.style.display=“块”；
document.getElementById（“必需的电子邮件”）.style.display=“block”；
document.getElementById（“valide_email”）.style.display=“无”；
}
否则如果（！filter.test（email.value））{
document.getElementById（“valide_email”）.style.display=“block”；
document.getElementById（“必需”）.style.display=“无”；
}
返回false；
}
电邮：
请输入有效的电子邮件地址，例如：(user@user.com)
此文件是必需的
名字：
此文件是必需的

在Css样式表中添加这两个类（或作为Id）

在javascript中，您可以在隐藏和可见之间更改其类，如下所示：

else if(!filter.test(email.value)) {
     document.getElementById("valide_email").className = "visible";
     document.getElementById("required").className = "hidden";
}

那么你的问题是什么？我想在电子邮件有效时显示valide_电子邮件em，但不要。

else if(!filter.test(email.value)) {
     document.getElementById("valide_email").className = "visible";
     document.getElementById("required").className = "hidden";
}