Question

我尝试使用AngularJS

创建一个简单的联系表单

代码＆gt;＆gt;

<div class='main'>
            <h2>AngularJS Form Validation</h2>
            <form name="myForm" ng-controller="Ctrl">
                <table>
                    <tr><td>Username</td><td> <input type="text" name="s_word" ng-model="m_word" ng-pattern="word" required ng-trim="false">
                            <span class="error" ng-show="myForm.s_word.$error.required">Required!</span>
                            <span class="error" ng-show="myForm.s_word.$error.pattern">Single word only!</span>
                        </td></tr>

                    <tr><td>    URL</td><td> <input type="url" name="in_url" ng-model="m_url" required>
                            <span class="error" ng-show="myForm.in_url.$error.required">Required!</span>
                            <span class="error" ng-show="myForm.in_url.$error.url">Not valid url!</span>
                        </td></tr>

                    <tr><td>Email </td><td><input type="email" placeholder="Email" name="email" ng-model="m_email" ng-minlength=3 ng-maxlength=20 required />
                            <span class="error" ng-show="myForm.email.$error.required">Required!</span>
                            <span class="error" ng-show="myForm.email.$error.minlength">Not less that 3 char</span>
                            <span class="error" ng-show="myForm.email.$error.email">Invalid Email!</span>
                        </td></tr>

                    <tr><td>
                            Phone</td><td> <input type="text" placeholder="33-333-33333" name="phone" ng-pattern="ph_numbr" ng-model="m_phone" />
                            <span class="error" ng-show="myForm.phone.$error.required">Required!</span>
                            <span class="error" ng-show="myForm.phone.$error.minlength">Not less that 10 char</span>
                            <span class="error" ng-show="myForm.phone.$error.maxlength">Not More than 11 char</span>
                            <span class="error" ng-show="myForm.phone.$error.pattern">Pls Match Pattern [12-236-23658 ]</span>
                        </td></tr>
                    <tr><td>
                            Message</td><td><input type="text" placeholder="Message here" name="Message" ng-pattern="Msg" ng-model="m_message" ng-minlength=20 />
                             <span class="error" ng-show="myForm.Message.$error.required">Required!</span></td>
                    <tr><td>
                             <button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
                        </td>
                    </tr>   
            </form>
        </div>


 .main{
                margin: 10px auto;
                width:350px;
                border: 1px solid #ccc;
                padding: 20px;  
            }
            .error{
                color:red;  
            }



  function Ctrl($scope) {
                $scope.m_word = '';
                $scope.word = /^\s*\w*\s*$/;
                $scope.m_url = 'http://example.com';
                $scope.ph_numbr = /^\+?\d{2}[- ]?\d{3}[- ]?\d{5}$/;     
                $scope.Msg = '';    
            }

http://code.angularjs.org/1.2.9/angular.min.js 从上面的链接授予角度链接以上我提供了完整的表格代码。在我的Chrome中，所需的电话号码和消息无效。

请允许我离开这里。

Answer 1

在未填写必填字段的情况下，不完全确定表单的提交原因，但您也可以尝试以下方法：

在控制器中有一个功能，可以在必填字段上执行验证。如果它们没有填充/空，则返回false。在提交按钮的“点击”上调用此功能。一旦您返回false，您将看到浏览器显示验证工具提示以及必填字段。

Answer 2

据我所知，Angular并不会自动停止提交表单。这是开发人员的工作决定。这是我的表单/控制器如何协同工作。

查看：

<form class="form-horizontal" name="form" ng-submit="create(form)" novalidate>
<!-- other form stuff -->
<button type="submit" class="btn btn-primary">Submit</button>

控制器：

$scope.create = function(form) {
  if(form.$valid) {
    // form is valid, safe to submit to server
  }
};

这是最后两个输入未验证的原因。目前的代码：

<input type="text" placeholder="33-333-33333" name="phone" ng-pattern="ph_numbr" ng-model="m_phone" />

这里应该是什么：

<input required type="text" placeholder="33-333-33333" name="phone" ng-pattern="ph_numbr" ng-model="m_phone" />

联系表格中要求失败

2 个答案: