Question

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

结构如下：

的index.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));

＆＃39;标识符＆＃39;属性引用表单输入中的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>

在这种情况下，我要验证电子邮件＆＃39;仅输入。

理论上，这将使表单在我按下“提交”按钮（语义UI魔术）时得到验证。因此，当我按下提交时，空白电子邮件输入必须用红色显示。指向无效的输入。

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

有人能帮助我吗？并道歉我的英语。这不是我的故乡郎。：）

Answer 1

在这里找到解决方案：

https://stackoverflow.com/a/25513588/1877447

我也在这个问题上发布了答案。

角度+语义UI表单验证不起作用

1 个答案: