表单验证

最新推荐文章于 2025-08-18 20:17:18 发布

weixin_34293911

最新推荐文章于 2025-08-18 20:17:18 发布

阅读量103

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/navyouth/p/7742422.html

本文介绍了HTML表单中各种元素的应用，并通过实例详细讲解了如何使用JavaScript进行表单验证，包括非空验证、相等验证及范围验证等。此外还介绍了如何利用正则表达式对输入的数据进行格式验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单元素    <form method="get/post" action="aa.html">
    文本输入
    <input type="text" name="" value=""/>文本框
    <input type="password" name="" value=""/>密码框
    <textarea name=""></textarea>文本域
    <input type="hidden" name="" value=""/>隐藏域
    按钮
    <input type="reset" name="" value=""/>重置
    <input type="button" name="" value=""/>普通按钮
    <input type="submit" name="" value=""/>提交按钮
    <input type="image" name="" value="" src=""/>图片按钮
    选择输入
    <input type="radio" name="" value=""/>单选
    <input type="checkbox" name="" value=""/>复选
    <input type="file" name="" value=""/>文件上传
    <select>
        <option></option>
        <option></option>
        <option></option>
    </select>
    </form>

1、非空验证

验证输入内容是不是空

   <body>     
        <form action="denglu.html" method="get">
        	用户名:<input type="text" name="yhm" id="yhm" />
            <input type="submit" value="登录" id="dl" onclick="return YanZheng()" />
        </form>
    </body>

<script type="text/javascript">
    	        function YanZheng()
		{
			var yhm = document.getElementById("yhm").value
			if(yhm=="")
			{
				alert("用户名不能为空！");
				return false;	
			}
			else
			{
				return true;	
			}
			
		}
</script>

相等验证

验证两次密码是否一致

<body>
     <form action="denglu.html" method="get">
            密码：<input type="text" name="mm" id="mm" />
            确认密码：<input type="text" name="qm" id="qm" />
            <input type="submit" value="登录" id="dl" onclick="return YanZheng()" />
      </form>
</body>

<script type="text/javascript">
    	        function YanZheng()
		{
			var mm = document.getElementById("mm").value;
			var qm = document.getElementById("qm").value;
			if(mm=="")
			{
				alert("密码不能为空！");
				return false;	
			}	
			else if(qm=="")
			{
				alert("确认密码不能为空！");
				return false;	
			}
			else if(mm!=qm)
			{
				alert("密码不一致！");
				return false;		
			}
			else
			{
				return true;	
			}	
		}
</script>

3、范围验证

验证年龄是不是符合要求

   <body>    
       <form action="denglu.html" method="get">
            年龄：<input type="text" name="nianling" id="nianling" />
            <input type="submit" value="登录" id="dl" onclick="return YanZheng()" />
        </form>
    </body>

    <script type="text/javascript">
		//alert("\\");
    	function YanZheng()
		{
			var nl = document.getElementById("nianling").value;
			if(nl=="")
			{
				alert("年龄不能为空！");
				return false;	
			}
			else if(nl<=18 || nl>=80)
			{
				alert("年龄不符！");
				return false;		
			}
			else
			{
				return true;	
			}
			
		}
    </script>

4、正则表达式

/^中间写东西$/；……^开始 $结束

正则函数

   match
    检查一个字符串匹配一个正则表达式内容，如果没有匹配返回 null。
    var re = /^\w+$/;

var a

a.math(re)

  <body>    
       <form action="denglu.html" method="get">
           邮箱：<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 yx = document.getElementById("youxiang").value;
              var zz =  /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
               if(yx=="")
               {
                  alert("邮箱不能为空！");
                  return false;    
               }
               else if(yx.match(zz)==null)
               {
                 alert("邮箱格式不正确！");
                 return false;    
               }
               else
              {
                 return true;    
              }
            
        }
 </script >