javascript - Javascript 表单验证匹配电子邮件和邮政编码

问题描述

我正在尝试让表单验证为家庭作业工作，但我的老师基本上没用。我应该按照这个网站的（https://jqueryvalidation.org/）文档来创建一个表单来检查电子邮件是否匹配并且有一个邮政编码，我已经尝试了一些不同的方法来让这个工作到目前为止。现在唯一有效的是js/jquery.validate.js我从网站下载的文件，但它目前只检查有效的电子邮件，而不是确认电子邮件匹配或有效的邮政编码。因此，我尝试使用本地脚本为这两件事添加规则和消息，但它们似乎不起作用。我还尝试在外部 .js 文件中执行此操作（我会将代码发布到 .

======Index.html:======

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Join Email List</title>
    <link rel="stylesheet" href="email_list.css">

</head>
<body>
    <section>
        <h1>Please join our email list</h1>
        <h4>* denotes required field</h4>
        <form id="email_form" name="email_form" action="join.html" method="get">
            <label for="email">Email Address:*</label>
            <input type="email" id="email" name="email" required><br>

            <label for="email_confirm">Re-enter Email:*</label>
            <input type="text" id="email_confirm" name="email_confirm" required><br>

            <label for="first_name">First Name:</label>
            <input type="text" id="first_name" name="first_name"><br>

            <label for="last_name">Last Name:</label>
            <input type="text" id="last_name" name="last_name"><br>

            <label for="zip">5-Digit Zip Code:*</label>
            <input type="text" id="zip" name="zip" required><br>

            <label>&nbsp;</label>
            <input type="submit" id="join" name="join" value="Join our List">
            <input type="reset" id="reset" name="reset" value="Reset"><br>
        </form>
    </section>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="js/validate.js"></script>
    <script>
    $( "#email_form" ).validate({
  rules: {
  
    email_confirm: {
      equalTo: "#email"
    }
    
    zip: {
        minlength: 5
        maxlength: 5
    }
  }
  
  messages: {
    email_confirm: {
        equalTo: "E-mail must match."
        }
    zip: {
        minlength: "Zip code must be 5 digits.",
        maxlength: "Zip code must be 5 digits."
        }
});
</script>
</body>
</html>```



========js/Validate.js:=======

$().ready(function() {
    $("email_form").validate();
        rules: {
            
            email: {
                required: true,
                email: true
            }
            
            email_confirm: {
                equalTo: "#email"
            }
            
            zip: {
                minlength: 5,
            }
        }
            
        messages: { 
        
            email: {
                required: "Please enter an e-mail",
                email: "Please enter a valid e-mail",
            }
            
            email_confirm: {
                equalTo: "Your e-mails must match"
            }
            
            zip: {
                minlength: "Please enter a valid 5-digit zip code"
            }
        
        
        }
}

标签： javascripthtml

javascript - Javascript 表单验证匹配电子邮件和邮政编码

问题描述

解决方案

推荐阅读