时间戳

首页 > 解决方案 > 当输入字段无效时，如何使 angularjs 记录默认的 html5 验证消息？

javascript - 当输入字段无效时，如何使 angularjs 记录默认的 html5 验证消息？

问题描述

所以，我一直在做一个项目，我使用 angularjs 来验证表单输入字段。问题是，当输入字段为空时，我希望 angularjs 记录默认的 html5 验证消息，例如“请填写此字段”。它应该类似于下面的代码：

var x = document.getElementById("myForm");
var y = document.getElementById("email");
var z = document.getElementById("error");

x.addEventListener("submit", (e) => {
    if (y.checkValidity() === false) {
        e.preventDefault();
        z.innerHTML = y.validationMessage;
    }
});
body {
    background-color: white;
    color: black;
    font-family: sans-serif;
}

button {
    padding: 5px 10px;
    cursor: pointer;
}

.error, #error {
    color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Email validation example</title>
</head>
<body>
    <form id="myForm" action="?" novalidate="">
        <label for="email">Email:</label>
        <input type="email" id="email" required=""/>
        <span class="error">* <span id="error"></span></span>
        <br/><br/>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

A：请注意y.validationMessage代码中的 javascript 部分。它将默认的 html5 输入验证消息记录到<span>元素中（如果您运行该片段，那么您可能知道）。

B：我的问题是：有没有办法让 angularjs 像validationMessage属性一样记录默认的 html5 输入验证消息？

标签： javascripthtmlangularjs

解决方案

你可以试试这样

 <form id="myForm">
       <label for="email">Email:</label>
       <input type="email" id="email" name="email" ng-model="email" required=""/> 
       <span ng-show="myForm.email.$dirty && myForm.email.$error.required">Email is required.</span>
       <br/><br/>
       <button type="submit">Submit</button>
    </form>

样本

推荐阅读