4.10号 表单验证

Posted 2020-10-30 syx1997

        <form action="1.html" method="post">
            用户名:<input type="text" name="y" id="y" />
            密码：<input type="password" name="p" id="p" />
            确认密码：<input type="password" name="qp" id="qp"/>
            年龄：<input type="text" name="n" id="n" />
            手机号：<input type="text" name="s" id="s" />
        	<input type="submit" value="提交" onclick="return Ti()" />
        </form>
    </body>
    <script type="text/javascript">
		//非空验证
		function Ti()
		{
			//获取文本框的值，判断是否为空
			var y = document.getElementById("y").value;
			if(y=="")
			{
				alert("用户名为空");
				return false;
			}
			else
			{
				return true;	
			}
		}
		
		//相等验证
		function Ti()
		{
			var p = document.getElementById("p").value;	
			var qp = document.getElementById("qp").value;
			if(p==qp)
			{
				//相等的提交	
				return true;
			}
			else
			{
				//不相等的
				alert("输入的密码不一致");	
				return false;
			}
		}
		
		//范围验证
		function Ti()
		{
			//18-30	
			var n = document.getElementById("n").value;
			if(n>18 && n<30)
			{
				return true;
			}
			else
			{
				alert("年龄不符");	
				return false;
			}
		}
		
		//正则验证
		function Ti()
		{
			var s = document.getElementById("s").value;	
			var z = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
			if(s.match(z)==null)
			{
				alert("手机号不正确");
				return false;	
			}
			else
			{
				return true;	
			}
		}

套在一起用：用 if 嵌套做，条件不正确的话弹出，正确的话执行下一步。

 <form action="清明作业.html" method="post">
        用户名： <input type="text" name="y" id="y" /><br />
        密码：   <input type="password" name="p" id="p" /><br />
        确认密码：<input type="password" name="qp" id="qp"/><br />
        年龄：  <input type="text" name="n" id="n" /> <br />
        手机号：  <input type="text" name="s" id="s" /><br />;
           <input type="submit" value="提交" onclick="return Ti()" />
     </form>
  
</body>

<script type="text/javascript">
   function Ti()
   {      
	  var y=document.getElementById("y").value;	 		 
	    if (y=="")
	     {
		  alert("请输入用户名");         y空是时候弹出
		  return false;   
	     }
	    else                                         y输入东西的时候执行下一步
	     {   var p= document.getElementById("p").value;
	         var qp = document.getElementById("qp").value;
			  if (p!=qp)
	          {
		         alert("密码不一致");
		         return false;
				 
              }
	           else
	          {      var n= document.getElementById("n").value; 
			        if ( n<18 || n>30 )                
			        {
					    alert("年龄不符");
						return false;	
				    }
			        else
					{
						var s = document.getElementById("s").value;	
			           var z = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
			           
			           if(s.match(z)==null)
					   { 
					      alert("手机号错误");
						  return false;
					   }
					   else
					   {
						   return true;
					   }
						
					     return true;	
					}
			    
			    
		         return true;
	          }
		   
		    return true; 
	     }
	  
	 
	   
   }
	 

</script>