表单知识 恶补

placeholder 属性设置

有三种实现方式：伪元素（pseudo-elements）、伪类（ pseudo-classes）和Notihing。
WebKit和Blink（Safari,Google Chrome, Opera15+）使用伪元素 。

::-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>

    ···
    阅读更多

    • posted @ 2017-10-14 21:54  lake.hu  阅读(133)  评论(0)  编辑  收藏  举报