Question

我需要创建一个验证表单，其中包含匹配的密码，没有空字段，只有正确字段中的字母/数字，日期（从现在起和之前），仅包含数字的年龄和具有适当格式的电子邮件。我设法做了电子邮件的事情，但任何人都可以帮我完成javascript代码吗？

body {
    line-height: 30px;
}
.error {
    color: red;
    font-size: 0.8em;
    font-style: italic;
}
#erroremail {
    visibility: hidden;
}
#errorfname {
    visibility: hidden;
}

$(document).ready(function() {
    $("input[name='email']").blur(function validateForm() {
        var x = $("input[name='email']").val();
        var pat = /.+@.+\.\w\w\w/;
        if (pat.test(x)) {
            document.getElementById("erroremail").style.visibility = "hidden";
        }
        if (!pat.test(x)) {
            document.getElementById("erroremail").style.visibility = "visible";
            return false;
        }
    });
});

<form ... method="post" action="" onsubmit="">
    <label>Username:</label>
    <input type="text" name="username" maxlength="16" /><br>

    <label>First Name:</label>
    <input type="text" name="fname" maxlength="24" /> 
    <span class="error" id="errorfname">Wrong Email Format.</span><br>

    <label>Last Name:</label>
    <input type="text" name="lname" maxlength="24" /><br>

    <label>Password:</label>
    <input type="password" name="password" maxlength="16" /><br>

    <label>Confirm Password:</label>
    <input type="password" name="password2" maxlength="16" /><br>

    <label>Email:</label>
    <input type="text" id="email" name="email" /> 
    <span class="error" id="erroremail">Wrong Email Format.</span><br>

    <label>Age:</label>
    <input type="text" name="age" maxlength="2" /><br>

    <label>Date:</label>
    <input type="date" name="date" /><br><br>

    <input type="submit" value="Submit" onclick="return validateForm(); empty();" />
</form>

Answer 1

关闭你应该改变一下javascript。

对于html中的表单元素，您应该处理有关该表单的提交事件。例如。

<form ... method="post" action="" onsubmit="validate();">

OR

<form id="myForm">
$("#myForm").on('submit',function() {
    //Handle logic example.

    var email = $("input[name='email']").val();
    var regex = /\S+@\S+\.\S+/;
    if(!regex.test(email)) {
        alert("Not a valid email");
        return;
    };

    //Rest of logic....
});

您可以比较的日期。

var date = new Date($("input[name='date']").val());         
var dateNow = new Date(); // or Date.now()
if(dateNow > date) {
   //Do stuff
}

如何完成Javascript验证表单

1 个答案: