带有 Javascript 的 asp.net 中的验证表单

Question

我刚刚使用 MVC 在 asp.net 中创建了我的第一个表单 |使用 Jquery Ajax
当客户填写字段时，我也有成功和不成功的消息

表格代码：

<div class="modal fade" id="ShowModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" class="close" data-dismiss="modal">&times;</a>
                <h4>Registration form</h4>
                <div id="message1">
                    <div class="alert alert-success">
                        <span class="glyphicon glyphicon-ok"></span><strong>Success Message! Your Registration Is Complete</strong>
                    </div>
                </div>

                <div id="message2">
                    <div class="alert alert-danger">
                        <span class="glyphicon glyphicon-remove"></span><strong>Error Message! Your Registration Is Not Complete</strong>
                    </div>
                </div>

                <div class="modal-body">

                    <form id="Registration">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                <input class="form-control" type="text" name="Username" id="user" placeholder="User" />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                                <input class="form-control" type="email" name="Email" id="Email" placeholder="Email" />
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                                <input class="form-control" type="password" name="Password" id="Password" placeholder="Password" />
                            </div>
                        </div>
                    </form>

                    <div class="form-group">
                        <button class="btn btn-info form-control" type="submit" onclick="SaveForm()"><i class="glyphicon glyphicon-registration-mark"> </i>Submit</button>
                    </div>

                </div>
            </div>
        </div>

    </div>

消息的Javascript代码

  <script>
   <script>
        function SignUp() {
            $("#ShowModal").modal();
            $("#message1").hide();
            $("#message2").hide();

        }
        function SaveForm() {
            var name = $("#user").val();
            var pwd = $("#Password").val();
            var email = $("#Email").val();

            if (name == "" || pwd == "" || email == "") {

                $("#message1").hide();
                $("#message2").show();


                return false;

            }

            var data = $("#Registration").serialize();
            $.ajax({
                type: "post",
                data: data,
                url: "/Register/saveData",
                success: function (result) {

                    $("#message1").show();
                    $("#message2").hide();
                    $("#Registration")[0].reset();
                }
            });
        }

    </script>

有一种简单的方法可以验证电子邮件和密码吗？ 对于电子邮件需要是@，密码需要是 6-12 个字符。 如果可能的话，我可以在我的代码中编辑我的错误消息 >> id="message2。

谢谢:)

Answer 1

对于简单的验证，您可以使用纯 JavaScript 方法 includes：

// email simple validation
if ( email.includes('@') && email.includes('.') ) {
    // email is valid

} else {
    // error message

}

// password validation
if ( password.length >= 6  && password.length <= 12 ) {
    // password have the desired length

} else {
    // error

}