最近使用了html5中的input,感觉很牛逼,有很多类型和属性方便小伙伴去做各种好看的表单样式。下面我们先来看看HTML5默认的input的一些样式(本文主要讨论的是验证样式):
默认验证样式:
代码:
<!-- 默认的input -->
<form>
<input type="text" required><br/>
<input type="possword" required><br/>
<input type="submit">
</form>
可以看出当我们添加了required属性时,HTML5将自动帮我们对input进行验证,看是否用户有输入信息。
但是有时候我们想根据自己的需求弹出提示,这个时候就需要覆盖默认的input样式。
下面是一个自定义input样式的例子:
我们在input框的右边加上了错误和正确时的图片,同时,可以看到当我们点击提交时,如果输入有无效信息,就会出现我们自定义的提示信息。下面给出代码:
<style type="text/css">
input{
margin: 10px 0;
}
/*无效输入时的样式*/
input:required:invalid{
background-image: url(error.png);
background-position: right center;
background-repeat: no-repeat;
border-color: red;
box-shadow: none;
/* 兼容FF13以前版本 */
-moz-box-shadow: none;
}
/*有效输入时的样式*/
input:required:valid{
background-image: url(true.png);
background-position: right center;
background-repeat: no-repeat;
border-color: green;
box-shadow: none;
/* 兼容FF13以前版本 */
-moz-box-shadow: none;
}
</style>
</head>
<body>
<!-- 修改后的input -->
<form>
<input type="text" name="" required><br/>
<input type="text" name="" required pattern=".{2,5}" oninvalid="setCustomValidity('两至五个汉字')" oninput="setCustomValidity('')"><br/>
<input type="text" name="" required oninvalid="setCustomValidity('请输入用户名')" oninput="setCustomValidity('')"><br/>
<input type="submit" name="">
</form>
</body>
(1)首先, 我们在input添加了required属性(规定必需在提交之前填写输入字段。),当用户没有输入任何信息时,将弹出HTML5默认的或是自定义的信息(oninvalid事件中定义的信息 ),如第三个input它将弹出“请输入用户名”这样的提示信息。同时,HTML5提供了patern属性,它接受一个正则表达式,当表单提交时这个正则表达式会被用于验证表单内非空的值,如果控件的值不匹配这个正则表达就会弹出提示框,并阻止表达提交。
(2)其次,提示框内的文字可以使用setCustomValidity()方法来自定义,通过oninvalid和oninput事件进行调用。其中,oninvalid事件是当用户输入的信息不合法时并且会在表单submit事件之前进行触发,同时如果验证不通过的话就不会触发表单的submit。而提交时会先验证所有表单元素是值是否有效。除了提交外还可以手动调用checkValidity方法来执行验证,或是事件监听方式(可以自己来定义js代码)。oninput事件在用户输入时触发。该事件类似于onchange 事件。
oninput事件与onchange 事件区别:
oninput 事件在元素值发生变化是立即触发,oninput事件是IE之外的大多数浏览器支持的事件,在value改变时触发,实时的,即每增加或删除一个字符就会触发,然而通过js改变value时,却不会触发。从浏览器的自动下拉提示中选取时,也不会触发。
onchange事件 在元素失去焦点时触发(onchange事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发;)。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select>
元素。
(3)使用css对样式进行修改
/*===包含required的表单===*/
/* 无效 */
input:required:invalid{
CSS代码
}
/* 有效 */
input:required:valid{
CSS代码
}
上例中的error和true图片就是通过css来设置的,通过css可以设置用户在输入有效与无效时的样式。
最后,推荐一篇深度好文
oninput="setCustomValidity('')"表示在用户输入的时候将错误提示设置为空字符串(就是在输入时没有提示出来)
嘿嘿、、、、、、