博客

<!– 表单验证 –>

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