JS 表单验证不使用alert框

最新推荐文章于 2022-05-26 17:58:20 发布

Gyoung阿广

最新推荐文章于 2022-05-26 17:58:20 发布

阅读量2.7k

点赞数 2

分类专栏： JavaScript 文章标签： JS 表单验证不使用alert框

本文链接：https://blog.csdn.net/u012755393/article/details/51329857

版权

JavaScript 专栏收录该内容

48 篇文章 2 订阅

订阅专栏

JS 表单验证不使用alert框

我们验证表单数据是否合格时，经常用alert框来弹出提示信息，但很多人觉得很烦，觉得干扰了在线体验，这里介绍一种“被动式验证”。在结构上只加入一个span标签。一个简单的例子如下：

<html>
	<head>
		<title>不使用alert框</title>
	</head>
	<script>
		function CheckInput(inputField ,helpText){
			if(inputField.value.length==0){
				if(helpText!=null)
					helpText.innerHTML="please enter a value";
				return false;
			}
			else{
				if(helpText!=null)
					helpText.innerHTML="";
				return true;
			}
		}
	</script> 
	<body>
		用户名：<input type="text" name="txt_username" id="txt_username" οnblur="CheckInput(this,document.getElementById('txt_username_msg'));"/><span id="txt_username_msg"></span>
		<br/>
		密码：<input type="text" name="txt_password" id="txt_password" οnblur="CheckInput(this, document.getElementById('txt_password_msg'));"/><span id="txt_password_msg"></span>
	</body>
</html>