Question

如何在保存按钮上显示模式弹出窗口，告知输入数据的格式不正确？

这是我输入字段的代码：

  <input class="inputs len_md" name="number" ng-model="myModel.text"  required  ng-pattern="/^(\d)+$/" / >

我的按钮如下：

 <button type="submit" class="button" Save</button><br><br><br>

我的模态弹出窗口是

  <div class="modal-dialog">
<div class="modal-content" ng-hide="incorrect_format" id="incorrect_format">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="cancel()">&times;</button>
    <h6 class="modal-title" id="myModalLabel">Error</h6>
  </div>
  <div class="modal-body" >
    <p><center>The format is incorrect.</center> </p>


  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-warning" data-dismiss="modal" ng-click="cancel()">OK</button>
  </div>
</div>

如何在按钮单击上显示检查正确格式验证的弹出窗口？我使用angularjs btw。谢谢你的帮助

Answer 1

如果我理解正确，您只是在用户输入的信息不是0到65535之间的数字时才会显示此弹出窗口。

为此，首先需要向按钮添加ng-click事件，该按钮以mymodel.text变量作为参数运行函数。该功能将确定用户是否输入了一个号码（最基本的验证器）。这看起来像是：

var validator = function(mymodel.text){
     if (mymodel.text === NaN){
     incorrect_format = false;
     }
}

按钮会调用，如：

<button ng-click = "validator()" type="submit" class="button" Save</button><br><br><br>

然后，这会将变量的条件更改为false，并导致ng-hide函数停止执行并显示模态弹出窗口。

Answer 2

我只是检查来自控制器的验证并显示模态是否错误。

<!DOCTYPE html>
<html>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<input class="inputs len_md" name="number" ng-model="myModel.text"  required  ng-pattern="/^(\d)+$/" / >

<button type="submit" class="button" ng-click="upd_check()">Save</button><br><br><br>


<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-hidden="true" ng-click="cancel()">&times;</button>
                <h6 class="modal-title" id="myModalLabel">Error</h6>
            </div>
            <div class="modal-body" >
                <p><center>The format of Max UDP Connection is incorrect.</center> </p>
                <p><center>Please enter a number from 0~65535.</center> </p>
                <p><center>(0 means no limit)</center> </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal" ng-click="cancel()">OK</button>
            </div>
        </div>
    </div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) 
{
    $scope.upd_check = function(value)
    {
        var patt = new RegExp("/^(\d)+$/");
        var res = patt.test(value);

        if(!res)
        {
            $("#myModal").modal('show');
        }
    }

});

</script>
</body>
</html>

AngularJS中的格式验证不正确

2 个答案: