表单知识恶补

最新推荐文章于 2022-03-26 10:47:04 发布

weixin_33997389

最新推荐文章于 2022-03-26 10:47:04 发布

阅读量105

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lakeInHeart/p/7668716.html

本文介绍了如何使用HTML5的pattern属性和JavaScript的setCustomValidity方法进行表单验证，并展示了如何利用CSS伪元素和伪类自定义表单的placeholder样式。

placeholder 属性设置

有三种实现方式：伪元素（pseudo-elements）、伪类（ pseudo-classes）和Notihing。
WebKit和Blink（Safari,Google Chrome, Opera15+）使用伪元素。
css ::-webkit-input-placeholder
Mozilla Firefox 4-18使用伪类

:-moz-placeholder

Mozilla Firefox 19+ 使用伪元素

::-moz-placeholder

IE10使用伪类

:-ms-input-placeholder


input[type="text"]::-webkit-input-placeholder { /* WebKit browsers */
    font-size: 13px;
}
input[type="text"]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-size: 13px;
}
input[type="text"]::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-size: 13px;
}
input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10+ */
    font-size: 13px;
}

input pattern 验证提示消息

有问题, 咱们就得解决, 在面向谷歌编程许久, 终于觅得一良方:

oninvalid：提交的input元素的值为无效值时（这里是正则验证失败），触发
oninvalid事件。oninvalid属于Form 事件。
setCustomValidity()：这个是HTML5内置的JS方法，用来自定义提示信息
原来可以通过oninvalid和setCustomValidity来自定义提示, 那这就好办了, 修改源代码如下:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    <form action="">
        <label >
            数字: <input type="text" pattern="^\d{11}$" oninvalid="setCustomValidity('请输入11位数字')">
        </label>
        <input type="submit">
    </form>
</body>
</html>

项目之中的应用
```html

联系人手机

            <div class="item-inte">
                <input type="text" name="contact-tele" placeholder="输入联系人手机" required pattern="^1[3|4|5|6|7|8|9][0-9]\d{8}$" oninput="setCustomValidity(''); checkValidity(); setCustomValidity(validity.valid ? '' :'请输入有效手机号码');">
                <!-- 
                    1. oninput="setCustomValidity(''); checkValidity(); setCustomValidity(validity.valid ? '' :'请输入有效手机号码');" 
                    2. oninvalid="setCustomValidity('Should not be left empty.')" oninput="setCustomValidity('')"
                    目前的方案是，当验证通过之后，再错，还是不会发现，但是为师只能如此了。。。
                -->
            </div>
        </li>

···
阅读更多

转载于:https://www.cnblogs.com/lakeInHeart/p/7668716.html