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

最新推荐文章于 2022-04-08 15:56:19 发布

惜之z

最新推荐文章于 2022-04-08 15:56:19 发布

阅读量9.6k

点赞数 1

分类专栏： PHP

本文链接：https://blog.csdn.net/zxh543362234/article/details/46841891

版权

PHP 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

在编写注册界面时，如果时提交一次检测一次用户输入的信息是否正确时是很烦躁而且不合理的，故采用了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" οnblur="checkUserid()" /> <span id="useridSpan" style=" color:#F00">*6-12字母，数字组合</span>
            </td>
        </tr>
    </table>
</body>
</html>

惜之z

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
使用js实现注册表单时自动检测输入信息

在编写注册界面时，如果时提交一次检测一次用户输入的信息是否正确时是很烦躁而且不合理的，故采用了js实现动态地检测输入信息的时候合理性，从用户角度出发是及其合理化的，下面简单介绍下该功能代码的实现。这是测试时所用的表单：然后是检测非法输入时的提示信息：接下来时输入正确信息时的提示：这就是该代码实现的功能，下面贴出相关代码：functio
复制链接

扫一扫