还算实用的验证表单H5

<!-- 表单验证 -->
<form action="#" method="post">
    <div align="center" style="width: 80%">
        <h2>表单验证</h2>
        <table>
            <tr>
                <td>用户名:</td>
                <td><input type="text" id="uname" name="uname" pattern="^[a-zA-Z_][a-zA-Z0-9_]{2,16}$" required oninvalid="setCustomValidity('请输入正确的用户名');" οninput="setCustomValidity('');" /></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="text" id="password" name="password" pattern="^[a-zA-Z0-9]{6,18}$" required oninvalid="setCustomValidity('请输入正确的密码');" οninput="setCustomValidity('');" /></td>
            </tr>
            <tr>
                <td>电话:</td>
                <td><input type="text" id="phone" name="phone" pattern="^1[3|5|7|8][0-9]{9}$" required oninvalid="setCustomValidity('请输入正确的电话');" οninput="setCustomValidity('');" /></td>
            </tr>
            <tr>
                <td>IP:</td>
                <td><input type="text" name="ip" id="ip" pattern="^(0|[1-9]?|1\d\d?|2[0-4]\d|25[0-5])\.(0|[1-9]?|1\d\d?|2[0-4]\d|25[0-5])\.(0|[1-9]?|1\d\d?|2[0-4]\d|25[0-5])\.(0|[1-9]?|1\d\d?|2[0-4]\d|25[0-5])$" required oninvalid="setCustomValidity('请输入正确的ip地址');"
                        οninput="setCustomValidity('');" /></td>
            </tr>
            <tr>
                <td>电子邮箱:</td>
                <td><input type="email" name="email" id="email" required oninvalid="setCustomValidity('请输入正确的邮箱地址');" οninput="setCustomValidity('');" /></td>
            </tr>
            <tr>
                <td>中文姓名:</td>
                <td><input type="text" name="name" id="name" pattern="^[a-zA-Z\u4e00-\u9fa5]{2,10}$" required oninvalid="setCustomValidity('请输入正确的姓名');" οninput="setCustomValidity('');" /></td>
            </tr>
            <tr>
                <td>数字:</td>
                <td><input type="text" name="number" id="number" pattern="^[0-9]*$" required oninvalid="setCustomValidity('请输入正确的数字');" οninput="setCustomValidity('');" /></td>
            </tr>
            <tr>
                <td>文件路径(带文件名):</td>
                <td><input type="text" name="number" id="number" pattern="[a-zA-Z]:(\\([a-zA-Z0-9_]+.[a-zA-Z0-9_]{1,16}))+" required oninvalid="setCustomValidity('请输入正确的路径');" οninput="setCustomValidity('');" /></td>
            </tr>
            <tr>
                <td>带正负号的double类型:</td>
                <td><input type="text" name="sum" id="sum" pattern="^[\+\-]?[0-9.]+$" required oninvalid="setCustomValidity('请输入正确');" οninput="setCustomValidity('');" /></td>
            </tr>
            <tr>
                <td>带符号以及字母:</td>
                <td><input type="text" name="max" id="max" pattern="^[\w\?%&=\-_]+$" required oninvalid="setCustomValidity('请输入正确');" οninput="setCustomValidity('');" /></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="提交" />
                    <input type="reset" value="重置" />
                </td>
            </tr>
        </table>
    </div>
</form>