Question

我打算使用AngularJS进行简单的表单验证，但似乎没有用。这是我的plunkr文件：http://plnkr.co/edit/sEPAhszlFofLfb87uh8S。

我不知道为什么，一切似乎都很好，但它没有解雇。

我的html文件：

<html>

  <head>
    <!-- CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <style>
        body     { padding-top:30px; }
    </style>
    <!-- JS -->
    <script src="http://code.angularjs.org/1.2.6/angular.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="validationApp" ng-controller="mainController">
    <div class="container">
      <!-- PAGE HEADER -->
      <div class="page-header">
        <h1>AngularJS Form Validation</h1>
      </div>
      <!-- =================================================================== -->
      <!-- FORM ============================================================== -->
      <!-- =================================================================== -->
      <!-- pass in the variable if our form is valid or invalid -->
      <form name="regForm" ng-submit="submitForm(regForm.$valid)" novalidate>
        <!-- NAME -->
        <div class="form-group item item-input" ng-class="{ 'has-error' : regForm.name.$invalid && (regForm.name.$dirty || submitted)}">
                  <input type="text" name="name" class="form-control" ng-model="user.name" placeholder="Full Name" ng-required="true">
                  <br/>
                  <p ng-show="regForm.name.$error.required && (regForm.name.$dirty || submitted)" class="help-block">Please provide your full name</p>
            </div>
            <div class="form-group item item-input" ng-class="{ 'has-error' : regForm.email.$invalid && (regForm.email.$dirty || submitted)}">
                <input type="email" name="email" class="form-control" ng-model="user.email" placeholder="Email Address" ng-required="true">
                <p ng-show="regForm.email.$error.required && (regForm.email.$dirty || submitted)" class="help-block">Email is required.</p>
                <p ng-show="regForm.email.$error.email && (regForm.email.$dirty || submitted)" class="help-block">Enter a valid email.</p>
            </div>
            <div class="form-group item item-input" ng-class="{ 'has-error' : regForm.contactno.$invalid && (regForm.contactno.$dirty || submitted) }">
                <input type="text" name="contactno" class="form-control" ng-model="user.contactno" placeholder="Phone number" ng-pattern="^0[0-9]{2}[- ]?[0-9]{3} ?[0-9]{4,5}$" maxlength="11"  ng-required="true">
                <p ng-show="regForm.contactno.$error.required && regForm.contactno.$error.pattern && (regForm.contactno.$dirty || submitted)" class="help-block">Enter a valid phone number.</p>
            </div>
            <div class="form-group item item-input" ng-class="{ 'has-error' : regForm.org.$invalid && (regForm.org.$dirty || submitted)}">
                <input type="text" name="org" class="form-control" ng-model="user.org" placeholder="Organization Name" ng-required="true">
                <p ng-show="regForm.org.$error.required && (regForm.org.$dirty || submitted)" class="help-block">Please input name of your organization</p>
            </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
  </body>

</html>

我的js文件：

var validationApp = angular.module('validationApp', []);

// create angular controller
validationApp.controller('mainController', function($scope) {

    // function to submit the form after all validation has occurred            
    $scope.submitForm = function(isValid) {

        // check to make sure the form is completely valid
        if (isValid) { 
            alert('our form is amazing');
        }

    };

});

我只需要它来验证所有必填字段都有相关输入而不是空字段。

Answer 1

您的ng-pattern应该是ng-pattern="/^[0-9]{2}[- ]?[0-9]{3} ?[0-9]{4,5}$/"而不是ng-pattern="^0[0-9]{2}[- ]?[0-9]{3} ?[0-9]{4,5}$" regx模式应该在开头使用转义字符/＆amp;结束了。

Working Plunkr

Answer 2

你的模式错误，来自角度文档：

ngPattern（可选）字符串
如果是，则设置模式验证错误密钥 value与RegExp模式表达式不匹配。期望值是 / regexp /用于内联模式或regexp用于定义为范围的模式表达式。

因此，在模式的开头和结尾添加正斜杠应该可以正常工作

使用AngularJS进行表单验证无效

2 个答案: