Question

我正在使用Bootstrap制作模态。我需要阻止模态关闭，同时不填充所需的输入或不满足输入要求。我怎样才能实现输入的要求？像RegExp这样的东西？

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Adding a user</h4>
            </div>
            <form name="userAdding">
                <div class="modal-body">
                    <input type="text" required placeholder="Name" id="inputName">
                    <br>
                    <input type="text" required placeholder="Username" id="inputUsername">
                    <br>
                    <input type="email" required placeholder="Email" id="inputEmail">
                    <br>
                    <input type="text" placeholder="Street" id="inputStreet">
                    <br>
                    <input type="text" placeholder="Suite" id="inputSuite">
                    <br>
                    <input type="text" placeholder="City" id="inputCity">
                    <br>
                    <input type="number" placeholder="Zipcode" id="inputZipcode">
                    <br>
                    <input type="number" placeholder="Lat" id="inputLat">
                    <br>
                    <input type="number" placeholder="Lng" id="inputLng">
                    <br>
                    <input type="number" placeholder="Phone" id="inputPhone">
                    <br>
                    <input type="text" placeholder="Website" id="inputWebsite">
                    <br>
                    <input type="text" required placeholder="Companyname" id="inputCompname">
                    <br>
                    <input type="text" placeholder="Catchphrase" id="inputCatchphrase">
                    <br>
                    <input type="text" placeholder="bs" id="inputBs">
                 </div>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addUser()">Submit</button>
            </div>
        </div>
    </div>
</div>

Answer 1

从提交按钮中删除数据关闭，然后我只在此处提供电子邮件。其余的你可以这样做：

 function addUser(){
            var email = document.getElementById('inputEmail').value;
            var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            if(re.test(email)){
                $('#myModal').modal('hide');
                console.log(email + " Success");
            }else{
                console.log(email + " Failed")
            }
        }

Answer 2

根据您的第一个要求（不要关闭模式），您可以： 1.删除标题中的关闭按钮， 2.禁用页脚中的关闭按钮，直到所有输入都被填满。

对于后者，有多种可能性：

默认情况下禁用该按钮，然后将函数绑定到输入的change事件。在其中，检查所有输入并相应地设置按钮状态。

addUser()

，检查输入的有效性。如果它们不正确，请使用this stackoverflow中描述的解决方案之一来取消关闭事件。

Answer 3

function addUser()
{
   $("form").validate({
        showErrors: function (errorMap, errorList) {
            var errors = this.numberOfInvalids();
            if (errors) {
                return false;
             }  
        });
}

将addUser函数的代码添加到其限制模型中，以便在发生任何验证时隐藏。

Bootstrap：输入未填充时模态关闭

3 个答案: