表单验证 

 <body>

   <form action="denglu.html" method="get">
        	用户名:<input type="text" name="yhm" id="yhm" />
            密码：<input type="text" name="mm" id="mm" />
            确认密码：<input type="text" name="qm" id="qm" />
            年龄：<input type="text" name="nianling" id="nianling" />
            邮箱：<input type="text" name="youxiang" id="youxiang" />
            <input type="submit" value="登录" id="dl" onclick="return YanZheng()" />
        </form>                                            点击调用函数
    </body>


 <script type="text/javascript">
		
    	function YanZheng()
		{
			var yhm = document.getElementById("yhm").value;    /*取里面的value值*/
			var mm = document.getElementById("mm").value;
			var qm = document.getElementById("qm").value;
			var nl = document.getElementById("nianling").value;
			var yx = document.getElementById("youxiang").value;
			var zz =  /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
			
			if(yhm=="")
			{
				alert("用户名不能为空！");
				return false;	
			}
			else if(mm=="")
			{
				alert("密码不能为空！");
				return false;	
			}	
			else if(qm=="")
			{
				alert("确认密码不能为空！");
				return false;	
			}
			else if(mm!=qm)  /* 密码与确认密码不一致*/
			{
				alert("密码不一致！");
				return false;		
			}
			else if(nl=="")
			{
				alert("年龄不能为空！");
				return false;	
			}
			else if(nl<=18 || nl>=80)
			{
				alert("年龄不符！");
				return false;		
			}
			else if(yx=="")
			{
				alert("邮箱不能为空！");
				return false;	
			}
			else if(yx.match(zz)==null)    /* match
检查一个字符串匹配一个正则表达式内容，如果没有匹配返回 null。*/
			{
				alert("邮箱格式不正确！");
				return false;	
			}
			else
			{
				return true;	
			}
			
		}


 </script>

 

 

 

1.非空验证，出现下图效果：

2.相等验证

3.范围验证

 

 4.正则验证

 

 正则表达式：
        定界符  //
        开始 ^
        结尾 $   /^$/
        \转义
        \n \r 换行  \t  制表符  \"  双引号  \'单引号
        * 前面的表达式可以出现n次
        ?  出现一次或是零次
        /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

 

posted on 2017-11-08 10:15  左剃头  阅读(145)  评论(0)    收藏  举报

导航