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  required>
                <!-- Credit: http://stackoverflow.com/questions/5458076/regex-in-new-pattern-attr-for-html5-forms -->
                <label for="password">Password</label>
                <input  required>
                <p/>
                <input type="submit" class="btn" value="Login">

        </form>

        <h2>Register</h2>
        <form action="" autocomplete="off">
                <label for="username2">Username</label>
                <input  required>

                <label for="password2">Password</label>
                <input  required>

                <label for="email">Email</label>
                <input  required>

                <label for="url">Homepage</label>
                <input >

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