javascript - 是否可以输入 ="text"以要求电子邮件或电话?

标签 javascript html

我做了一个 <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/

相关文章:

JavaScript - 每当找到另一个字符时就在字符串中添加字符

javascript - 您将如何在单词搜索解算器中实现垂直单词查找?

html - 如何使用 Bootstrap 在页面中间设置水平和垂直

javascript - Angular.JS - 是否可以在一个指令中有多个 View ?

javascript - 如何为 vue3 main div #app 提供动态类?

c# - 为什么在代码隐藏中将 display 设置为 none 不会将其添加到 HTML 中?

javascript - 如何在json中给出本地文件的url路径

javascript - 迭代对象的属性

html - 如何从表单提交中删除 'submit query'?

javascript - Meteor - 如何仅在开发或生产中使用包