用JavaScript判断登陆界面的输入框是否符合约束

html部分

		<form action="http://localhost:8080/oa/save" id="form1">
			账号<input type="text" name="" id="zhanghao" value="" />
			<span id="error1">	
			</span><br>
			密码<input type="password" name="" id="pwd" value="" /><br>
			确认密码<input type="password" name="" id="querenpwd" value="" />
			<span id="error2">		
			</span><br>
			<input type="button" name="" id="tijiao2" value="完成注册" />
		</form>

表单里提交的方法是button，不是submit的原因是submit不能对表单里面的内容进行判断。(应该可以，应该是我现在还不会）。

css部分控制span框里面

			span{
				color: red;
				font-size: medium;
			}

JavaScript代码部分

			window.onload=function()
			{
				var er1=document.getElementById("error1");
				//绑定id等于error1的盒子（显示账号处的错误信息)
				var zhang=document.getElementById("zhanghao");
				//拿到输入的账号名
				document.getElementById("zhanghao").onblur=function()
				//绑定鼠标单击事件
				{
					var zhangh=zhang.value;
					//拿到账号名的value
					zhangh=zhangh.trim();
					//去掉zhang里面的空格
					if(zhangh=="")
					{
						//如果是空的账号名，将错误信息提示在span里
						er1.innerHTML="账号不能为空"
					}
					else
					{
						//走到这证明账号名不为空
						if(zhangh.length<3||zhangh.length>9)
						{
							//判断账号名的长度
							er1.innerHTML="账号长度应在3-9之间"
						}
						else
						{
							var regExp=/^[a-zA-Z0-9]+$/	
							//判断输入的账号名的类型 用到了正则表达式（记住、会查就行）
							var ok=regExp.test(zhangh)
							if(ok)
							{
								//账号名满足所有约束条件
								er1.innerHTML=""
							}
							else
							{
								//显示错误信息
								er1.innerHTML="账号名只能由字母和数字组成"
							}
						}
					}
				}				
				document.getElementById("zhanghao").onfocus=function()
				{
					//再次获得焦点时，清空span里面的错误信息（把鼠标放进账号名框里，错误信息消失）
					er1.innerHTML="";
				}
				
				
				
				//判断密码框
				var er2=document.getElementById("error2");
				//拿到id为error2的span
				var mimalan=document.getElementById("pwd");
				//拿到输入的密码
				var qurenmima=document.getElementById("querenpwd");
				//拿到输入的确认密码
				document.getElementById("querenpwd").onblur=function()
				//给确认密码框绑定鼠标单击事件
				{
					if(qurenmima=="")
					{
						er2.innerHTML="密码不能为空"
					}
					else
					{
						if(mimalan.value!=qurenmima.value)
						{
							//判断输入的密码和输入的确认密码是否相同
							er2.innerHTML="确认密码与密码不一致"
						}
						else
						{
							//输入的密码满足条件
							er2.innerHTML=""
						}
					}
				}
				document.getElementById("querenpwd").onfocus=function()
				{
					//确认密码框再次获得焦点时，清空span里面的错误提示
					er2.innerHTML=""
				}
				
				//提交操作没有用submit， submit无法判断表单中输入的元素是否全部合法，所以用button判断
				document.getElementById("tijiao2").onclick=function()
				{
					//获得焦点和失去焦点 检验输入的内容是否合法
					
					//检验文本框
					document.getElementById("zhanghao").focus();
					document.getElementById("zhanghao").blur();
					//检验密码框
					document.getElementById("querenpwd").focus();
					document.getElementById("querenpwd").blur();
					//处理空密码和空确认密码也能提交的Bug，拿到两个value比较
					var zumima=document.getElementById("pwd").value;
					var qumima=document.getElementById("querenpwd").value;
					if(zumima==""||qumima=="")
					{
						er2.innerHTML="未输入或确认密码"
					}
					else if(er1.innerHTML==""&&er2.innerHTML=="")
					//两个显示错误信息span， 如果两个span里面的值时空的，那么就证明了表单中没有错误信息
					{
						var Tijiao=document.getElementById("form1");
						//拿到表单里的值，然后submit
						Tijiao.submit();
					}
					
				}
			}

正则表达式的使用方法，直接记或者会查就行。然后就是焦点的捕获，东西有点乱，但理清思路之后，很简单。提交时判断form里的内容的方法确实很好（我自己认为的）。今天就学了这么多，，明天继续。。。。