我做了一个 <input type="text" placeholder="phone or email" required="required" />
我只是想知道我是否可以做到它需要有效的电子邮件或号码?
最佳答案
可以使用 pattern
属性在 input
上实现纯 HTML 数据验证:http://jsfiddle.net/887saeeg/ .与 :valid
和 :invalid
伪类相结合,仅使用表示技术就可以拥有不错的错误检查功能。当然,现代浏览器是必需的。 (在我的 Functional CSS 书籍系列的最后一卷中更详细地介绍了仅浏览器验证 [在亚马逊上可用])。
HTML:
<form>
<input type = "text" placeholder = "Phone or Email" required pattern = "^([a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3})|(\d{3}-\d{3}-\d{4})$"/>
<input type = "submit" value = "Send" />
</form>
编辑:使用 CSS 伪类的示例:http://jsfiddle.net/292pp5gk/ .
HTML:
<form>
<label>
<input type = "text" placeholder = "Phone or Email" required pattern = "^([a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3})|(\d{3}-\d{3}-\d{4})$"/>
<span class = "error">Please provide a valid telephone or email</span>
</label>
<input type = "submit" value = "Send" />
</form>
CSS:
label {
position: relative;
}
.error {
position: absolute;
white-space: nowrap;
bottom: -8px;
left: 0;
transform: translateY(100%);
display: none;
background-color: hsla(0, 50%, 70%, 1);
padding: 5px 10px;
border-radius: 5px;
font: normal 12px/1 Sans-Serif;
}
.error:before {
content: "";
position: absolute;
border-style: solid;
border-color: transparent transparent hsla(0, 50%, 70%, 1) transparent;
border-width: 0 5px 5px 5px;
left: 15px;
top: -5px;
}
input {
outline: 0;
}
input:invalid + .error {
display: block;
}
关于javascript - 是否可以输入 ="text"以要求电子邮件或电话?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31644310/