表单校验经典案例
来源：互联网 发布：中国行政区简称软件 编辑：程序博客网 时间：2024/05/06 03:33
为什么要表单校验
（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>
1 0
- 表单校验经典案例
- 经典表单案例
- 10-1 JS案例：表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- apicloud应用 用js跳转到苹果safari浏览器中
- JavaScropt基础总结
- postgresql 计算距离
- 【腾讯TMQ】手机发烫是为何 --App电量测试定位方法
- Perl运行其他程序的5种方法
- 表单校验经典案例
- MySQL索引背后的数据结构及算法原理
- VBA Excel 插入图片（非引用方式）
- 第四步 Javaweb开发之HTTP协议
- 部署war包到服务器后插入数据库的中文会乱码,直接用eclipse运行源码没问题
- 重启ftp服务无法访问
- Maven中-DskipTests和-Dmaven.test.skip=true的区别
- Apache Cassandra 的安装及使用 （二）
- HDOJ1002(大数相加)
