Question

我正在处理一个简单的注册表单。到目前为止，我已经进行了表单验证，但我不确定如何使警报正常工作。这个想法是让用户填写他们的信息，点击提交，然后会弹出一个包含他们给定信息的提醒。如何添加警报以使其工作？

HTML：

<div class="sign-up">
                <form>
                    <h2>Sign Up</h2>
                    <label>Name:</label>
                    <input type="text" placeholder="Enter your name" value="" id="suName" required>
                    <label>Email:</label>
                    <input type="email" name="email" id="suEmail" required placeholder="Enter a valid email address">
                    <label>Password:</label>
                    <input type="password" placeholder="Enter your password" name="password" id="suPassword" required>
                    <input class="submit-button su-submit" type="submit" id="mySUButton">
                </form>
            </div>

JS：

function setBindings() {

    $(".sign-up form #mySIButton").click(function (e) {
        e.preventDefault();

        var suName = $(".sign-up form #suName").val(),
            email = $(".sign-up form #suEmail").val(),
            pw = $(".sign-up form #suPassword").val(),

            alert("This is your entered information: " + suName.value + ", " + email.value + ", " + pw + ".");
    });
}


$(document).ready(function () {
    setBindings();
});

Answer 1

.value函数jQuery返回值不再需要.val()

试试这个：

var suName = $("#suName").val();
          var  email = $("#suEmail").val();
         var   pw = $("#suPassword").val();

            alert("This is your entered information: " + suName+ ", " + email+ ", " + pw + ".");

Answer 2

您有一些错误，这就是您的代码无法正常工作的原因。您只需编写以下jquery代码即可实现此目的：

 $("#mySUButton").click(function (e) {
    e.preventDefault();
    var suName = $("#suName").val();
    var email = $("#suEmail").val();
    var pw = $("#suPassword").val();
    if(suName=="" || email=="" || pw=="")
    {
        alert("All fields required");
        return false;
    }
    else if (IsEmail(email) == false)
    {
       alert("Invalid Email ID");
       return false;
    }
    alert("This is your entered information: " + suName+ ", " + email + ", " + pw + ".");
   });

function IsEmail(email) {
        var atpos = email.indexOf("@");
        var dotpos = email.lastIndexOf(".");
        if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
            return false;
        }
    }

Answer 3

只是抬头，你永远不应该将密码保存为字符串，并能够将其反映回用户（如在警报中）。您总是希望使用密码散列算法（bcrypt通常在我看来最好），因为在数据库中存储明文密码使得它们非常容易被利用。

话虽这么说，我认为你需要一个事件处理程序，比如点击提交时，你的javascript函数被调用，以及弹出警报。它应该提交到您的数据库（假设您的后端已设置），但我认为不会调用javascript函数。

Answer 4

在表单标记中使用onSubmit来验证表单

＆＃13;

function setBindings() {
        var suName = $("#suName").val();
        var email = $("#suEmail").val();
        var pw = $("#suPassword").val();
        var isValid = true;
        if(suName==""){
          alert("Name can't be empty");
          isValid = false;
        }
        if(email=="" && isValid){
          alert("Email can't be empty");
          isValid = false;
        }
        if(pw=="" && isValid){
          alert("Password can't be empty");
          isValid = false;
        }
        if(pw.length < 6  && isValid){
          alert("Password can't be less than 6 character");
          isValid = false;
        }
        return isValid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sign-up">
                <form onSubmit="return setBindings();">
                    <h2>Sign Up</h2>
                    <label>Name:</label>
                    <input type="text" placeholder="Enter your name" value="" id="suName" >
                    <label>Email:</label>
                    <input type="email" name="email" id="suEmail"  placeholder="Enter a valid email address">
                    <label>Password:</label>
                    <input type="password" placeholder="Enter your password" name="password" id="suPassword" >
                    <input class="submit-button su-submit" type="submit" id="mySUButton">
                </form>
            </div>

＆＃13;

我删除了HTML验证，required属性来测试javascript验证。

如何添加表单验证以及警报

4 个答案: