0

我正在尝试使用语义 UI 验证和 Angular JS（使用部分）来验证表单，但我没有取得任何成功。

结构如下：

索引.html

<!DOCTYPE html>
<html lang="en" ng-app="app" class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title ng-bind="'Users &#124; ' + title">Users</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/app.css"/>
  <link rel="stylesheet" href="css/semantic.min.css"/>
</head>
<body>

  <div ng-view></div>

  <script src="bower_components/angular/angular.min.js"></script>
  <script src="bower_components/angular-route/angular-route.min.js"></script>
  <script src="bower_components/angular-resource/angular-resource.min.js"></script>

  <script src="js/vendor/jquery-1.10.2.min.js"></script>  
  <script src="js/vendor/semantic.min.js"></script>

  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>

  <script src="js/ui.js"></script>
</body>
</html>

请注意脚本声明的最后一行。

<script src="js/ui.js"></script>

在这个脚本中，我验证了部分表单中的一些数据。

ui.js

(function ($) {
    'use strict';
    $('.ui.form')
        .form({
            email: {
                identifier: 'email',
                rules: [
                    {
                        type: 'empty',
                        prompt: 'Email cannot be blank.'
                    }
                ]
            }
        }, {
            on: 'blur',
            inline: 'true'
        });
}(jQuery));

“标识符”属性引用了表单输入中的 id 属性。

add-user.html（部分）

<div class="container">
    <h2 class="ui header">Add new user</h2>

    <div class="ui form segment">
        <div class="field">
            <label for="userid">ID</label>
            <div class="ui left labeled input">
                <input type="text" id="userid" disabled="true" placeholder="User ID" ng-model="user.userid" />
            </div>
        </div>

        <div class="field">
            <label for="email">Email</label>
            <div class="ui left labeled icon input">
                <input type="email" id="email" placeholder="Email" ng-model="user.email" />
                <i class="mail icon"></i>
                <div class="ui corner label">
                    <i class="icon asterisk"></i>
                </div>
            </div>
        </div>

        <button class="ui blue submit button">Submit</button>
    </div>
    <br>
    <a href="#/users">Back to home</a> | 
    <a href="#/users/new">New</a>
</div>

在这种情况下，我只验证“电子邮件”输入。

从理论上讲，这将使表单在我按下提交按钮的那一刻得到验证（语义 UI 魔术）。所以，当我推送提交时，空白的电子邮件输入必须是红色的。指向无效的输入。

问题是 ui.js 在整个页面呈现之前执行。这使得找不到 .ui.form 类。然后，魔法不会发生。这可以是局部渲染的东西，或者类似的东西。

有人能帮我吗？并为我的英语道歉。这不是我的母语。:)

4

0 回答 0