使用js实现注册表单时自动检测输入信息

来源：互联网发布：ubuntu 添加桌面图标编辑：程序博客网时间：2024/05/02 01:06

在编写注册界面时，如果时提交一次检测一次用户输入的信息是否正确时是很烦躁而且不合理的，故采用了js实现动态地检测输入信息的时候合理性，从用户角度出发是及其合理化的，下面简单介绍下该功能代码的实现。

这是测试时所用的表单：

然后是检测非法输入时的提示信息：

接下来时输入正确信息时的提示：

这就是该代码实现的功能，下面贴出相关代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script language="javascript">function checkUserid(){var ueridObj=document.getElementById("userid");var userid=trim(ueridObj.value);var useridRegex= /^\w{6,12}$/;var msg ="   <img src='img/true.gif' style='width:12px'>";if(!userid)msg ="<font color='red'>账号不能为空！</font>";else if(!useridRegex.test(userid))msg ="<font color='red'>账号长度不对！</font>";var span = document.getElementById("useridSpan");span.innerHTML = msg;return msg == "   <img src='img/true.gif' style='width:12px'>";}function trim(s){   return s.replace(/^\s+|\s+$/g,"");}</script><title>测试</title></head><body><table>    <tr>        <td>            账号：<input type="text" name="userid" id="userid" onblur="checkUserid()" /> <span id="useridSpan" style=" color:#F00">*6-12字母，数字组合</span>            </td>        </tr>    </table></body></html>

0 0