个人中心
gpt4 book ai didi

javascript - JavaScript 上的电子邮件验证功能错误

转载 作者：行者123 更新时间：2023-11-28 05:42:28 24 4
gpt4 key购买 nike

我的电子邮件验证似乎不太正常 -除了“ffhjisf”不是有效的电子邮件之外并且“”空字段需要数据，但由于某种原因，将有效的电子邮件视为错误。请帮我修改我的电子邮件地址检查功能吗？

Javascript

function checkForm(){   

        if (document.getElementById("fname").value == "" ) {
            document.getElementById("errfname").style.display = "inline";
            document.getElementById("errfname").style.visibility = "visible";
        }

        if (document.getElementById("fname").value.length < 2 ) { // and needs to be only letter and/or one hyphen
            document.getElementById("errfname1").style.display = "inline";
            document.getElementById("errfname1").style.visibility = "visible";
        }

        if (document.getElementById("sname").value == "" ) {
            document.getElementById("errsname").style.display = "inline";
            document.getElementById("errsname").style.visibility = "visible";
        }

        if (document.getElementById("sname").value.length < 2 ) { // just letters like first name (fname)
             document.getElementById("errsname1").style.display = "inline";
             document.getElementById("errsname1").style.visibility = "visible";
        }

        if (document.getElementById("title").value == "Please select" ) {
            document.getElementById("errtitle").style.display = "inline";
            document.getElementById("errtitle").style.visibility = "visible";
        }

         if (document.getElementById("HANo").value == "" ) {
            document.getElementById("errHANo").style.display = "inline";
            document.getElementById("errHANo").style.visibility = "visible";
        }

        if (document.getElementById("HANo").value.length != 6 ) { // and needs to be a number
            document.getElementById("errHANo2").style.display = "inline";
            document.getElementById("errHANo2").style.visibility = "visible";
        }

        if (document.getElementById("email").value == "" ) {
            document.getElementById("erremail").style.display = "inline";
            document.getElementById("erremail").style.visibility = "visible";
        }

        if (document.getElementById("email").value.length > 0 ) { 
            if(checkEmail())
            {
                document.getElementById("erremail").style.display = "inline";
                document.getElementById("erremail").style.visibility = "visible";
        }
        }

        if (document.getElementById("telno").value.length > 11 ) 
         { // and needs to be a number
            document.getElementById("errtelno").style.display = "inline";
            document.getElementById("errtelno").style.visibility = "visible";
            }
 }

function checkEmail(){
     var email = document.getElementById('email');
     var emailRegEx = /[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/;

     if (!emailRegEx.test(email.value)) 
     {
       document.getElementById("erremail2").style.display="inline";
       document.getElementById("erremail2").style.visibility = "visible";
       return false;
    } else {
        return true;
    }
}

和 html 页面

  <!doctype html>
  <html>
     <head>
       <meta charset="utf-8">
       <title>RATool</title>
       <link rel="stylesheet" type="text/css" href="cfcss.css">
       <script src="cf.js"></script>
    </head>
    <body>
     <h1> Zedland Health Authority </h1>
     <h2> Contact Form </h2>
         <fieldset>
             <label for="fname">First Name:</label>
                    <input name="fname" id="fname" class="formfield" type="text">
                 <span id="errfname" class="error">*This is required</span>
                <span id="errfname1" class="error">*Name fields must have more than one character, and do not contain numbers
                    or other non-allowed alphabetic characters. The only character the last name
                    field should legitimately contain is a hyphen (e.g. Whittaker-Jones).</span>
                 <span id="errfname2" class="error">*This can only contain alphabetic numbers and one hyphen</span>
             <br>
             <label for="sname">Surname:</label>
                 <input name="sname" id="sname" class="formfield" type="text">
                <span id="errsname" class="error">*This is required</span>
                 <span id="errsname1" class="error">*Name fields must have more than one character, and do not contain numbers
                or other non-allowed alphabetic characters. The only character the last name
                field should legitimately contain is a hyphen (e.g. Whittaker-Jones).</span>
                <span id="errsname2" class="error">*This can only contain alphabetic numbers and one hyphen</span>
             <br>
             <label for="title">Title: </label>
               <select name="title" id="title">
                 <option value="Please select">Please select</option>
                 <option value="Mr.">Mr.</option>
                 <option value="Ms.">Ms.</option>
                 <option value="Mrs.">Mrs.</option>
                 <option value="Miss.">Miss.</option>
                 <option value="Master.">Master.</option>
              </select>
             <span id="errtitle" class="error">*This is required</span>
            <br>
            <br>
             <label for="HANo">Health Authority Number:</label>
             <input name="HANo" id="HANo" class="formfield"type="text">
               <span id="errHANo" class="error">*This is required</span>
               <span id="errHANo2" class="error">* Numbers are in the form of a six-digit integer prefixed with the letters
                ZHA (e.g. ZHA346783)</span>
             <br>
             <br>
             <label for="email">Email:</label>
                 <input name="email" id="email" class="formfield"type="text">
                 <span id="erremail" class="error">*This is required</span>
                 <span id="erremail2" class="error">*Please enter a valid email</span>
             <br>
              <br>
               <label for="telno">Telephone Number:</label>
                <input name="telno" id="telno" class="formfield" type="text">
                <span id="errtelno" class="error">* If a telephone number is entered, then it should contain only numbers, not
                letters, or other disallowed characters. A valid Zedland telephone number has
                11 digits (no spaces)</span> 
            <br>
            <button onclick="checkForm()">Submit</button>
        </fieldset>
    </body>
</html>

最佳答案

您的 checkEmail() 函数返回 true 以及有效的电子邮件。但是，如果使用有效的电子邮件，则会在您的代码中执行此操作:

if(checkEmail())
{
    document.getElementById("erremail").style.display = "inline";
    document.getElementById("erremail").style.visibility = "visible";
}

这与您的预期相反。相反，请将错误消息设置为在 !checkEmail() 时可见。

此外，您应该 anchor 你的表达式为 ^ 和 $。否则，它可能会匹配诸如“invalid email@foo.org here”之类的子字符串。

/^[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}$/
<小时/>

代码

function checkForm() {
    var mailInput = document.getElementById("email"),
        errEmail = document.getElementById("erremail"),
        errEmail2 = document.getElementById("erremail2");;
    if (mailInput.value == "") {  // Empty email
        errEmail.style.visibility = "visible";
        errEmail2.style.visibility = "hidden";
    } else {
        errEmail.style.visibility = "hidden";
        if (checkEmail(mailInput)) {  // Valid email
            errEmail2.style.visibility = "hidden";
        } else {             // Invalid email
            errEmail2.style.visibility = "visible";
        }
    }
}

function checkEmail(email) {
    var emailRegEx = /^[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}$/;
    return emailRegEx.test(email.value);
}
#erremail,
#erremail2 {
    display: inline;
    visibility: hidden;
}
<h1> Zedland Health Authority </h1>
<h2> Contact Form </h2>
<fieldset>
    <label for="email">Email:</label>
    <input name="email" id="email" class="formfield" type="text">
    <span id="erremail" class="error">*This is required</span>
    <span id="erremail2" class="error">*Please enter a valid email</span>
    <button onclick="checkForm()">Submit</button>
</fieldset>

关于javascript - JavaScript 上的电子邮件验证功能错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38810341/

24 4 0
文章推荐： javascript - 追加后滚动 LI 不隐藏
文章推荐： ios - 通过在 textField Swift 中点击文本来识别文本
文章推荐： c++ - 向网格添加索引
文章推荐： ios - 如何获取 ip 地址打开球形相机设备并检查是否连接？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com