Angularjs表单验证不起作用

时间:2015-06-12 06:27:25

标签: angularjs

简单的angularjs表单验证在任何浏览器中都不起作用。我使用的是Netbeans 8.0.2 IDE。我不确定是什么问题。代码中有什么问题吗?

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Number only</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script>
            angular.module('myApp', []).controller("numOnlyRegex", function ($scope)
            {
                $scope.numOnlyRegex = /^\d+$/;
            });
        </script>

    </head>
    <body>
        <div ng-app="myApp" ng-controller="numOnlyRegex">
            <form name="myForm">
                Pin:<input type="text" ng-model="pin" ng-pattern="numOnlyRegex" name="pin" /><br/>
                <input type="Submit" value="Submit" />
            </form>
        </div>
    </body>
</html>

1 个答案:

答案 0 :(得分:4)

你的代码很好。您只需要在无效输入时禁用提交按钮!

 <input type="Submit" ng-disabled="myForm.$invalid"  value="Submit" />

这是plunkr

希望它有所帮助!