6

我们正在grunt-html-angular-validate为 HTML lints 使用包。它在后台使用 W3C在线验证器工具，到目前为止，它在验证我们的 Angular 模板方面做得很好。

今天，它在检查从存储库中提取的最新更改时失败，并出现以下错误：

验证 src/login/login.html ...错误 [L37:C108]

元素输入上属性自动聚焦的错误值 {{regCodeRequired}}。

以下是失败的相关行：

<div class="auth-reg-code-block" ng-if="regCodeRequired">
    <input class="form-control" type="text" name="regCode" 
           id="regCode" ng-model="user.regCode" autofocus="{{regCodeRequired}}" 
           placeholder="Registration Code" required>
</div>

这基本上是用于输入双因素身份验证的注册码的字段。regCodeRequired是一个布尔变量，true一旦用户通过第一个登录/密码验证步骤，就会设置为。

而且我看到输入出现在它上面（使用 chrome 39）——它正在工作。

问题：

我很确定验证工具有抱怨的理由，但我不确定如何继续。我们是否autofocus错误地使用了属性？我们应该如何修复验证错误？

我查看了W3C 验证器错误，试图找到解释，但那里什么autofocus也没有。此外，w3cjsgithub 存储库中没有任何内容。

这是 grunt 的配置htmlangular：

htmlangular: {
    options: {
        relaxerror: [
            'Element head is missing a required instance of child element title.',
            'Attribute href without an explicit value seen.',
            '& did not start a character reference.',
            'not allowed on element form at this point.',
            'not allowed as child of element',
            'Element img is missing required attribute src.'
        ],
        reportpath: null
    },
    all: [
        "<%= app.src %>/*.html",
        "<%= app.src %>/**/*.html"
    ]
}

将不胜感激任何指针。

4

2 回答 2

7

根据规范，该autofocus属性是一个布尔属性：

许多属性是布尔属性。元素上存在布尔属性表示真值，不存在该属性表示假值。

如果存在该属性，则其值必须是空字符串或与属性的规范名称匹配的不区分大小写的 ASCII 值，并且没有前导或尾随空格。

布尔属性不允许使用值“true”和“false”。要表示假值，必须完全省略该属性。

最后一段几乎解释了验证者抱怨的原因。

换句话说，您可以替换

<div class="auth-reg-code-block" ng-if="regCodeRequired">
    <input class="form-control" type="text" name="regCode" 
           id="regCode" ng-model="user.regCode" autofocus="{{regCodeRequired}}" 
           placeholder="Registration Code" required>
</div>

和：

<div class="auth-reg-code-block" ng-if="regCodeRequired">
    <input class="form-control" type="text" name="regCode" 
           id="regCode" ng-model="user.regCode" autofocus
           placeholder="Registration Code" required>
</div>

你可能对ng-autofocus 插件感兴趣。

于 2015-01-23T07:38:37.680 回答
1

尝试在您的配置中将 angular 选项显式设置为 true （这应该启用角度绑定 {{}} 的过程（摘要），并且 {{regCodeRequired}} 应该在验证 html 之前替换变量 regCodeRequired 的值):

htmlangular: {
    options: {
        angular: true, //per documentation: Turns on ignoring of validation errors that are caused by AngularJS.
        relaxerror: [
            'Element head is missing a required instance of child element title.',
            'Attribute href without an explicit value seen.',
            '& did not start a character reference.',
            'not allowed on element form at this point.',
            'not allowed as child of element',
            'Element img is missing required attribute src.'
        ],
        reportpath: null
    },
    all: [
        "<%= app.src %>/*.html",
        "<%= app.src %>/**/*.html"
    ]
}

如果这不起作用，那么您需要将此参数视为自定义指令：

 options: {
        customattrs: ['autofocus']
     //...
 }

每个文档：https ://www.npmjs.com/package/grunt-html-angular-validate

options.customattrs

类型：数组默认值：[]

在此处列出您通过指令和其他方式创建的所有自定义属性。验证器将忽略有关这些属性的警告。

您可以使用 * 通配符，例如：'custom-attrs-*'

于 2015-01-21T20:29:19.980 回答