我该如何选择所需的选项＆amp;角度js中的电子邮件验证？

Question

当点击提交按钮时，它将调用函数，在该函数中我试图写入逻辑以在字段无效时禁用提交按钮，此处电子邮件必须包含@，点和后点最小2＆amp;最多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>

SCRIPT：

    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为您的表单命名。

第二次，您需要在此处输入输入字段名称，例如username和email。

然后您可以使用各种角度验证directives来设置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示例

Answer 2

要禁用提交按钮，您可以执行以下操作：

<form name="myForm">
  <input ...>

  ...

  <button type="button" ng-disabled="myForm.$invalid" ng-click="formsubmit();">
    Submit
  </button>
</form>

请注意，我已ng-disabled条件myForm无效。因此，而不是等待用户点击按钮，我们在表单无效时预先禁用提交按钮！

对于电子邮件验证，我建议您使用<input type = "email"...>，除非您有type = "email"未处理的特定电子邮件验证要求

这是更新后的fiddle，它会在我们输入有效的电子邮件地址之前停用提交按钮。

修改：以下是ng-pattern如何用于验证给定规则的电子邮件的示例（即电子邮件必须包含@，点和点后最小值2＆amp;最多4个字母）

 <input type="text" ng-model="user.email" name="email" required
        ng-pattern="/[a-zA-Z0-9_.]+\@[a-zA-Z0-9_]+\.[a-zA-Z]{2,4}$/"/>

这是更新的fiddle

此外，regex101用于电子邮件验证正则表达式

Answer 3

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

app.controller('DemoCtrl', function() {

});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angular JS</title>
</head>
<body ng-app="jsbin">
  <div ng-controller="DemoCtrl as demo">
    <form name="form" novalidate ng-submit="validate()">
      <input type="email" name="email" ng-model="email" required />
      <span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span>
      <span class="help-inline" ng-show="submitted && form.email.$error.email">Invalid email</span>
       <button type="submit" class="btn btn-primary btn-large" ng-disabled="submitted && form.email.$error.required || submitted && form.email.$error.email" ng-click="submitted=true">Submit</button>
    </form>
  </div>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>

</body>
</html>

检查一下。