js应用提交表单(一)

我们在注册时常常用到一个东西就是注册表单,

注册表单由一般由一个用户名框一个密码框一个验证密码框组成,下面有一个submit按钮。

实现要求:用户名输入不超过12个字符且不为空,密码需要不超过15个字符且不为空,实现校验密码的功能,并且当某个框输入的不符合要求时获取焦点;

以下为实现的代码

​
<span id="tishi" style="color: red;">
</span>
<form onsubmit="return test()">
			
			用户名:<input id="user"/><br />
			密码:<input type="password" id="password" /><br />
			确认输入密码:<input type="password" id="repassword" /><br />
			<input type="submit" value="注册"/>
</form>

<script>
			function $(id){
					return document.getElementById(id);
			}
            function check()
			{
				
				var user=$("user").value;
				var password=$("password").value;
				var repass=$("repassword").value;
				var tishi=$("tishi");
				
				
				if(user==0){
				tishi.innerHTML="用户名为空";
				$("user").focus();
				return false;
				}else if(user.length>12){
					tishi.innerHTML="用户名输入错误";
					$("user").focus();
					return false;
				}
				
				if(password==0){
				tishi.innerHTML="密码为空";
				$("password").focus();
				return false;
				}else if(password.length>15){
					tishi.innerHTML="密码输入错误";
					$("password").focus();
					return false;
				}
				if(password!=repass)
				{	
					$("repassword").focus();
					tishi.innerHTML="校验错误";
					return false;
				}
				return false;
			}	
</script>

​

onsubmit的功能就是当按下提交按钮时执行sumbmit里的代码段,且代码段前必须有return 该代码段必须返回一个true或false常在form表单里使用。

innerHTML属性可用于改变相应标签对象里的文字。

猜你喜欢

转载自blog.csdn.net/qq_41313587/article/details/81483819