Html5 表单验证和style css验证支持
原文链接:http://www.javaarch.net/jiagoushi/693.htm
Html5 表单验证和style css验证支持
看看下面的这个示例:
<h2>Login</h2> <form action="" autocomplete="off"> <label for="username">Username</label> <input id="username" name="username" pattern="[a-zA-Z0-9]{5,}" title="Minimum 5 letters or numbers." required> <!-- Credit: http://stackoverflow.com/questions/5458076/regex-in-new-pattern-attr-for-html5-forms --> <label for="password">Password</label> <input id="password" name="password" type="password" pattern=".{5,}" title="Minmimum 5 letters or numbers." required> <p/> <input type="submit" class="btn" value="Login"> </form> <h2>Register</h2> <form action="" autocomplete="off"> <label for="username2">Username</label> <input id="username2" name="username" pattern="[a-zA-Z0-9]{5,}" title="Minmimum 5 letters or numbers." required> <label for="password2">Password</label> <input id="password2" name="password" type="password" pattern=".{5,}" title="Minmimum 5 letters or numbers." required> <label for="email">Email</label> <input id="email" name="email" type="email" required> <label for="url">Homepage</label> <input id="url" name="url" type="url"> <p/> <input type="submit" class="btn" value="Register"> </form>
验证很强大,如果不支持,我们可以使用jquery的验证模块,而且server端也会做验证,所以浏览器不支持对于页面没任何影响。
在css中,有几个伪类可以支持对表单验证不通过情况下的样式进行设置:
valid invalid required optional in-range out-of-range read-only read-write
html5 表单验证不通过的css设置示例如下:
<style> input:required { border-style:solid; border-width:thick; } input:valid { background-color: #adff2f; } input:invalid { background-color: #f08080; } </style>
相关推荐
wusiye 2020-10-23
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
行吟阁 2020-05-30
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19
suixinsuoyu 2020-05-15
HSdiana 2020-05-15
PioneerFan 2020-05-15