表单校验经典案例

最新推荐文章于 2020-10-04 15:50:32 发布
Summer夏天丶
最新推荐文章于 2020-10-04 15:50:32 发布
阅读量1.2k
点赞数 1
本文链接：https://blog.csdn.net/qq_36074042/article/details/71125030
版权





为什么要表单校验

（1）减轻服务器压力

（2）保证输入数据符合要求

正则：用来做匹配用的，本质就是有特定含义的一个字符串



 
 
  
  
 表单校验的常见内容包括验证输入是否为空，验证数据格式是否正确，验证数据的范围，验证数据的长度等。   在表单校验中通常需要用到String对象的成员，包括indexOf( )，substring( )和length等。   表单校验中常用的两个事件是onsubmit和onblur，常用来激发验证。   使用正则表达式可验证用户输入的内容，如验证电子邮箱地址，电话号码等。  定义正则表达式有两种构造形式，一种是普通方式，另一种是构造函数的方式。  正则表达式的模式分为简单模式和复合模式。  通常使用RegExp对象的test( )方法检测一个字符串是否匹配某个模式。  String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法。  使用表单选择器和表单属性过滤器可以方便的获取匹配的表单元素。
 
 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>休闲网登录页面</title>
    <style type="text/css"> 
		*{padding:0; margin:0;}
		body{
			font-size:12px;
			color:#000;
			line-height:25px;
			 }
		.main{
			float:none;
			margin-top: 0px;
			margin-right: auto;
			margin-bottom: 0px;
			margin-left: auto;
			clear:both;
		}
		#header{
			background-image: url(./images/bg.gif);
			background-repeat: repeat-x;
			height: 36px;
			}
		#headerLeft{width:200px;
		           float:left;
				   }
		#headerRight{width:160px;
		             float:right;
			         color:#FFF;
					 }
		#center{
			width:362px;
			text-align:center;
				margin-top: 20px;
			margin-right: auto;
			margin-bottom: 20px;
			margin-left: auto;
			
			}
		.bg{
			background-image: url(./images/dl_l_bg.gif);
			background-repeat: repeat-y;
			}
		.inputs{width:110px;
		height:16px;
		border:solid 1px #666666;
		
		}
		.bold{
			font-size:18px;
			font-weight:bold;
			text-align:center;
			line-height:45px;
			height:40px;
		}
		.rb1{
			height:20x;
			color:#fff;
			font-size:13px;
			background:#d32c47;
			padding:3px 10px;
			border-left:1px solid #fff;
			border-top:1px solid #fff;
			border-right:1px solid #6a6a6a;
			border-bottom:1px solid #6a6a6a;
			cursor:pointer;
			}
		#footer{text-align:center;
		color:#333;
		line-height:35px;
		}
		#footer a{
			color:#333;
			text-decoration:underline;
		}
		#footer hover{
			color:#333;
			text-decoration:none;
		}
    </style>
   <script type="text/javascript" src="js/jQuery1.11.1.js"></script>
    <script type="text/javascript">
        //第一步;当我点击登录按钮的时候，提交表单，也就是将表单中打有name属性的标签的value值提交到表单
        //的 action属性值指向的地址
		function checkEmail(){
		
	      var flag=true;
		  //1.锁定对象
             var dom=$("[id=email]"); //yymqqc@126.com
             
          //2.判定是否包含@ 和.
            var value=dom.val();
            if(value.indexOf("@")==-1){
               alert('邮箱中必须包含@');
               flag=false;
            }
            
             if(value.indexOf(".")==-1){
               alert('邮箱中必须包含.');
               flag=false;
             }
          return flag;   
		}
        
       $(function(){
       	  //★：一定是注册的是form表单的submit，并且保证提交按钮的类型是submit
       	  //按钮是submit类型，可以引起表单提交，但是咱们通过js代码干预表单的提交过程，就是
       	  //在表单提交前做一个前置判定，如果判定结果为真，继续提交提交表单，否则不进行提交
			
			var myform=$("form");
		 	myform.submit(function(){
			   return checkEmail();				   
			});
			
			
			
	
       }); 
        
    </script>
</head>

<body>
    <div id="header" class="main">
        <div id="headerLeft">
            <img src="images/logo.gif" /></div>
        <div id="headerRight">注册 | 登录 | 帮助</div>
    </div>
    <div class="main">
        <table id="center" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <img src="images/dl_l_t.gif" /></td>
            </tr>
            <tr>
                <td class="bg">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td class="bold">登录休闲网</td>
                        </tr>
                        <form action="success.html" method="post" id="myform" name="myform" >
                            <tr>
                                <td>Email：<input id="email" type="text" name="email" class="inputs" /></td>
                            </tr>
                            <tr>
                                <td> 密码：<input id="pwd" type="password" name="pwd" class="inputs" /></td>
                            </tr>
                            <tr>
                                <td style="height: 35px; padding-left: 30px;">
                                    <input  id="btn" type="submit" value="登录" class="rb1"  /></td>
                            </tr>
                        </form>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <img src="images/dl_l_b.gif" width="362" height="5" /></td>
            </tr>
        </table>
    </div>
    <div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a>  | <a href="#">帮助中心</a></div>
</body>
</html>