如何在输入验证工具提示消息中插入新行?当悬停时，它工作得很好，但我点击发送它没有

Question

如何在输入工具提示消息中添加新行。我试过<br>, n, &nbsp;但没有奏效。

<input type="password"  id="password" v-model="user.password" class="form-control"
title="Must contain at least one number, one uppercase letter, one special character and at least 8 characters"  pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}" required>

Answer 1

希望这对有帮助

只需将实体代码
用于title属性中的换行符。

在工具提示中添加换行符

https://jsfiddle.net/cuahms2z/

<form id="myform" >
<input data-html="true"  type="password"  id="password" v-model="user.password" class="form-control"
title="Must contain at least one number &#013;
one uppercase letter &#013;one special &#013; character and at least 8 characters"  pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}" required>
<input type="submit" />
</form>

Answer 2

更新

我在mdn/mdn为此创建了一个问题https://github.com/mdn/mdn/issues/114

---

我对此进行了一些研究，还发现了另外两个SO问题，一个没有答案，另一个答案非常糟糕。

• setCustomValidity多行消息样式
• 在无效消息中创建换行符

然后我找到了这篇文章，它帮助我更好地理解了这个案例，我写了自己的customValidatyMessage。

var input = document.getElementById('inp');
input.oninvalid = function(event) {
event.target.setCustomValidity("Must contain at least" + "n"+ "one" + "r" + "number one uppercase n letter,n one special n character and at least 8 characters");
}

MDN文档表示，.setCustomValidity()的参数是DOM字符串和JS字符串对应的DOM字符串

DOMString是一个16位无符号整数序列，通常被解释为UTF-16代码单元。这与JavaScript基元字符串类型。当向提供DOMString时JavaScript，它直接映射到相应的String。

所以我认为在字符串'n'或'n'中插入应该很容易。所以我尝试了，正如你在下面的例子中看到的那样，它被解释了，但在消息中仍然没有换行符。

var input = document.getElementById('inp');
input.oninvalid = function(event) {
event.target.setCustomValidity("Must contain at least " + String.fromCharCode(13) + " one " + String.fromCharCode(67) + " number one uppercase n letter,n one special n character and at least 8 characters");
}

<form id="myform">
<input id="inp" data-html="true" type="password" id="password" v-model="user.password" class="form-control"  pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}" required>
<input type="submit" />
</form>

遗憾的是，我没有找到解决这个问题的方法，但我认为我的尝试可以帮助解决这个问题，所以我决定把它写在这里，作为我的看法的总结。

Answer 3

输入回车会使行发生变化。

<input type="password"  id="password" v-model="user.password" class="form-control"
title=" · Must contain at least one number, 
· one uppercase letter, 
· one special character and
· at least 8 characters"  pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}" required>