Javascript 注册表单验证问题_Javascript_Jquery_Html_Forms

Javascript 注册表单验证问题

javascript jquery html forms

Javascript 注册表单验证问题,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,我对网络开发相当陌生，目前正在为一个网站制作一份注册表格，这样一个网站就可以接收新用户。到目前为止，在big'ol internet的帮助下，制作表单非常轻松，但最近我遇到了一个难题，那就是如何在提交实际数据库查询之前验证表单中的某些信息因此，我有以下表格：输入字段在大多数情况下都按预期工作。如果未填写并要求输入，则会闪烁红色：除了电子邮件字段。他们需要是相同的，而不仅仅是有效的电子邮件作为网站目前假定。所以，即使你在这两个领域有两封完全不同的电子邮件，只要它们是有效的电子邮件，它就会

我对网络开发相当陌生，目前正在为一个网站制作一份注册表格，这样一个网站就可以接收新用户。到目前为止，在big'ol internet的帮助下，制作表单非常轻松，但最近我遇到了一个难题，那就是如何在提交实际数据库查询之前验证表单中的某些信息

因此，我有以下表格：

输入字段在大多数情况下都按预期工作。如果未填写并要求输入，则会闪烁红色：

除了电子邮件字段。他们需要是相同的，而不仅仅是有效的电子邮件作为网站目前假定。所以，即使你在这两个领域有两封完全不同的电子邮件，只要它们是有效的电子邮件，它就会被接受

以下是表单后面的HTML：

<!-- Container Start -->
<div id="container">
    <div id="container_body">
        <div>
            <h2 class="form_title">Sign Up for a Collectors Account Here!</h2>
        </div>
        <!-- Form Start -->
        <div id="form_name">
            <div class="FirstAndLastName">
                <form name="form">
                <div id="errorBox"></div>
                    <input type="text" required value="" name="Name" value="" placeholder="First Name" class="input_name">
                    <input type="text" required value="" name="LastName" value="" placeholder="Last Name" class="input_name">
            </div>
                <div id="email_form">
                    <input type="email" required value="" name="Email" value="" placeholder="Your Email" class="input_email">
                </div>
                <div id="Re_email_form">
                    <input type="email" required value="" name="enterEmail" value="" placeholder="Re-enter Email" class="input_Re_email">
                </div>
                <div id="password_form">
                    <input type="password" required value="" name="Password" value="" placeholder="Your Password Here" class="input_password">
                </div>
                <div>
                    <script>
                        $(function() {
                            $("#datepicker").datepicker({
                                inline: true,
                                showOtherMonths: true,
                                dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
                            });
                        });
                    </script>
                    <h3 class="birthday_title">Birthday</h3>
                    <input type="text"  required value="" id="datepicker">
                </div>
                <div id="radio_button">
                    <input type="radio" name="radiobutton" value="Female" checked="true">
                    <label>Female</label>
                    &nbsp;&nbsp;&nbsp;
                    <input type="radio" name="radiobutton" value="Male">
                    <label>Male</label>
                </div>
                <div>
                    <input type="submit" value="Sign Up" onclick="Submit()">
                </div>
            </form>
        </div>
        <!-- Form Ends -->
    </div>
</div>
<!-- Container Ends -->

所以问题是，我如何让这个表单检查两个电子邮件字段是否包含完全相同的值，并在它们不完全相同时停止提交过程并显示错误消息

我还有第二个问题，有点离题：当你提交这份表格时，密码似乎是以明文形式存储的，即使它是在密码字段中完成的。我意识到，我正在工作的网站将有一个SHA-2证书，也伴随着Facebook登录之类的东西（这是强制性的），但我该如何解决这个问题呢？在尝试将其作为数据库中的新用户提交之前，是否使用算法对其进行加密

再一次，我在这方面是相当新的，所以我很抱歉提前放弃了有价值的代码和实践。非常欢迎所有我能得到的帮助。

您应该将上次的

if

语句改为此-

if($('#Re_email_form').find('input').val() != $('#email_form').find('input').val()) {
    alert('Emails not matching!');
    return false; // cancels the submission process
}

您应该将上次的

if

语句更改为此-

if($('#Re_email_form').find('input').val() != $('#email_form').find('input').val()) {
    alert('Emails not matching!');
    return false; // cancels the submission process
}

为了清晰起见，这里有一个性能稍好的纯JS版本：D

截图：

//HTML

<html>
<head>
    <link rel="stylesheet"href="index.css">
    <script src="index.js"></script>
</head>
<body>
    <form>
        <input type="email" placeholder="email" name="email" spellcheck="false" autocomplete="off">
        <input type="email" placeholder="verify email" name="verify_email" spellcheck="false" autocomplete="off">
        <input type="password" placeholder="password" name="pass" onkeypress="keyListener(event,this);">
        <button type="button" onclick="auth(this);">Sign In</button>
    </form>
    <mark id="form-msg"></mark>
</body>
</html>

为了清晰起见，这里有一个性能稍好的纯JS版本：D

截图：

//HTML

<html>
<head>
    <link rel="stylesheet"href="index.css">
    <script src="index.js"></script>
</head>
<body>
    <form>
        <input type="email" placeholder="email" name="email" spellcheck="false" autocomplete="off">
        <input type="email" placeholder="verify email" name="verify_email" spellcheck="false" autocomplete="off">
        <input type="password" placeholder="password" name="pass" onkeypress="keyListener(event,this);">
        <button type="button" onclick="auth(this);">Sign In</button>
    </form>
    <mark id="form-msg"></mark>
</body>
</html>

attr（'value'）

与使用

val（）

获得的元素属性

value

不同。。。在表单controlsAh上使用后者，这可以解释它。很高兴知道。谢谢基本上，属性不会随着用户输入而更新。

attr（'value'）

与使用

val（）

获得的元素属性

value

不同。。。在表单controlsAh上使用后者，这可以解释它。很高兴知道。谢谢基本上，属性不会随着用户输入而更新。我是否能够在“重新输入”电子邮件框上显示警告（如第二张图片），而不是让网站显示警告框？@Vipar我不是JS方面的专家（我不知道这是否可能），所以你应该在谷歌上搜索它或者在这里问另一个问题。我能在重新输入的邮箱上显示警告（如第二张图片）而不是让网站显示警告框吗？@Vipar我不是JS方面的专家（我不知道这是否可能），所以你应该在谷歌上搜索它或者在这里问另一个问题。我发现如果你只按“登录”，而不在任何电子邮件字段中输入任何内容，它就会通过，因为两者都是相同的。谢谢：）哈哈，该死的是，hella忘了检查空的。。。不过，您应该使用这种逻辑来循环表单数据并附加到formData对象。我发现，如果您只需按“登录”，而不在任何电子邮件字段中添加任何内容，它就会通过，因为两者都是相同的。谢谢：）哈哈，该死的是，hella忘了检查空的。。。不过，您应该使用该逻辑来循环表单数据并附加到formData对象。

body{
    margin: 0 !important;
    width: 100vw;   
    height: 100vh;
    background: #1E67CB;

    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;


    -webkit-justify-content: center;
    justify-content: center;
}
form{
    cursor: default !important;

    display: -webkit-flex;
    display: flex;

    -webkit-justify-content: center;
    justify-content: center;

    -webkit-align-self: center;
    align-self: center;

    -webkit-flex-direction: column;
    flex-direction: column;

    background: #ECF0F1;

    -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    padding: 1.3em;
}
form>input{ 
    width: 22.1em;;
    height: 2.5em;
    margin: 0.2em 0;
    font-size: 1em;
    -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
    text-align: center;
    border: 1px solid #d5dadc;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    color: #7C7C7C;
    outline: none;
}
#form-msg{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-self: center;
    align-self: center;
    height: 1.5em;
    margin: 1.5em;
    font-size: 1em;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
    background: none;   
}
form>button{
    width: 22.35em; 
    height: 2.5em;
    margin: 0.2em 0;
    padding: 0;
    font-size: 1em;
    -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
    cursor: pointer;
    outline: none;
    border: none;
    color: #fff;
    background: #2ECC71;
    border-radius: 2px;
    -webkit-border-radius: 2px;
}
form>button:hover{
    background: #40D47E;
}
form>button:active{
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.valid{
    border: 1px solid #2ECC71;
}
.invalid{
    border: 1px solid red;
}