html中做用户输入的判断_html判断输入框内容-CSDN博客

本文链接：https://blog.csdn.net/qq_43607992/article/details/104783599

html中做用户输入的判断

当用户输入信息时，要做一个对用户输入的信息做一个判断。这样的判断可直接由客户端进行判断。例如：
验证一个用户输入字符是否符合要求的代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>


  <script type="text/javascript">
  //练习
		function showMessage(){
			//获取用户名文本框
			var username = document.getElementById("username");
			//验证用户名
			if(username.value.length>=8 && isNaN(username.value.charAt(0))){
				document.write("<font color='green'>验证通过</font>");
			}else{
				document.write("<font color='red'>验证未通过</font>");
			}
		}
	</script>


 </head>
 <body>
  

用户名长度不少于8位，且不能以数字开头<br>
请输入用户名：<input type="text" name="username" id="username"/>
	<input type="buttom" onClick="showMessage()" value="判断用户名长度和类型"/>


 </body>
</html>

演示效果：
在这里插入图片描述
进行验证用户输入的信息是否符合要求，关键代码：

if(username.value.length>=8 && isNaN(username.value.charAt(0))){
				document.write("<font color='green'>验证通过</font>");
			}else{
				document.write("<font color='red'>验证未通过</font>");
			}

长度要不少于8位且开头不能用数字。
其中：isNaN() 函数用于检查其参数是否是非数字值。
关于isNaN()函数的用法可通过w3cSchool->isNaN()函数介绍查看

案例：
用户输入用户名和密码，并进行输入判断。用户名为abc,密码：123。
效果图如图所示：
在这里插入图片描述
代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <script type="text/javascript">
//测试
	function checkUser(){
		var username=document.getElementById("uname");
		var username=document.getElementById("uname");
		if(uname.value=="abc" && upwd.value==123){
				location.href="http://www.baidu.com";
		}else{
			alert("用户或密码输入错误");
		}
	}
  </script>
  用户名：<input type="text" id="uname" name="uname"/><br/>
  密码：<input type="password" id="upwd" name="upwd"/><br/>
  <input type="button" id="btnSubmit" οnclick="checkUser()" value="登录"/>
 </body>
</html>