javascript - 我如何在 angularjs 中选择所需的选项和电子邮件验证？

Question

当点击提交按钮时，它将调用函数，在该函数中我试图编写逻辑以在字段无效时禁用提交按钮，这里电子邮件必须包含@，点和点后最小2个和最大4个字母人物。我尝试了以下代码。

HTML:

<div ng-app="myApp" ng-controller="myCtrl">
        <form name="myForm">
            <div>
                <select id="country" style="width:250px;" class="" name="selectFranchise" ng-model="state1" ng-change="displayState(state1)"
                    ng-required>
                    <option ng-repeat="(key,country) in countries"  value="{{key}}">{{country[0]}}</option>
                </select>
            </div>
            <div>
                <select id="state" ng-disabled="!states[state1].length" ng-model="cities" ng-required>
                    <option ng-repeat="(state,city) in states[state1]" value="{{city}}">{{city}}</option>
                </select>
            </div>
            <input type="email" ng-disable="myForm.user.email.$valid" ng-model="user.email" name="eamil" ng-required/>
            <button ng-disable="myForm.user.email.$valid" ng-click="formsubmit();">submit</button>
        </form>
    </div>

脚本:

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.formsubmit = function () {

        }
        $scope.states = {
            "IN": [
                "Delhi",
                "Goa",
                "Gujarat",
                "Himachal Pradesh",
            ]
        };
        $scope.countries = {
            IN: ["India"],
            ZA: ["South Africa"],
            AT: ["Austria"]
        }
        $scope.state1 = Object.keys($scope.countries)[0];
        $scope.lastName = "Doe";
    });

jsfiddle

Answer 1

<form role="form" name="signupForm" ng-submit="signup()" novalidate>

  <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-6">
                      <div class="clearfix">&nbsp;</div>
                      <div class="inputGroup">
                        <input type="text" id="su_username" name="username" class="form-control input-md"
                               ng-model="user.username" ng-minlength="8" required>
                        <span class="inputBar"></span>
                        <label translate="signup.form.username">Username</label>
                        <span class="text-danger" ng-show="signupForm.username.$dirty && signupForm.username.$invalid">
                          <span ng-show="signupForm.username.$error.required" translate="signup.messages.validate.username.required">Username is required.</span>
                          <span ng-show="signupForm.username.$error.minlength" translate="signup.messages.validate.username.minlength">Username must be at least 8 characters.</span>
                        </span>
                      </div>
                    </div>

                    <div class="col-xs-12 col-sm-6 col-md-6">
                      <div class="clearfix">&nbsp;</div>
                      <div class="inputGroup">
                        <input type="email" name="email" id="su_email" class="form-control input-md"
                               ng-model="user.email" required>
                        <span class="inputBar"></span>
                        <label translate="signup.form.email">Email Address</label>
                        <span class="text-danger" ng-show="signupForm.email.$dirty && signupForm.email.$invalid">
                          <span ng-show="signupForm.email.$error.required" translate="signup.messages.validate.email.required">Email is required.</span>
                          <span ng-show="signupForm.email.$error.email" translate="signup.messages.validate.email.invalid">Invalid email address.</span>
                        </span>
                      </div>
                    </div>
                  </div>



                      <button type="submit" class="btn btn-custom btn-lg btn-block" 
                              ng-disabled="signupForm.$invalid ">

第一个，您需要在此处为​​表单命名，即 signupForm 。

第二，您需要为输入字段提供名称，例如这里它们是用户名和电子邮件。

然后您可以使用各种 Angular 验证指令来设置validation约束，例如require、length 然后您可以使用 signupForm.username.$invalid 检查验证错误，并检查 signupForm.email.$error.email 等各种错误。

最后如果您想检查整个表单是否有效，请使用signupForm.$invalid

并用于数字验证

angular.module('test')
  .directive('validNumber', function() {
    return {
      require: '?ngModel',
      link: function(scope, element, attrs, ngModelCtrl) {
        if(!ngModelCtrl) {
          return;
        }

        ngModelCtrl.$parsers.push(function(val) {
          if (angular.isUndefined(val)) {
            val = '';
          }
          var clean = val.replace( /[^0-9\.]/g, '');
          if (val !== clean) {
            ngModelCtrl.$setViewValue(clean);
            ngModelCtrl.$render();
          }
          return clean;
        });

        element.bind('keypress', function(event) {
          if(event.keyCode === 32) {
            event.preventDefault();
          }
        });
      }
    };
  });

您可以从 here 找到 github 示例