第七章表单校验

来源：互联网发布：office word 2016 mac 编辑：程序博客网时间：2024/05/21 17:24

为什么要表单校验

（1）减轻服务器压力

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

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

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

、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><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><title>My JSP 'te2.jsp' starting page</title><script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript">/* function checkEmail(){  var flag=true;       var dom=$("[id=email]"); //yymqqc@126.com          var value=dom.val();    if(value.indexOf("@")==-1){       alert('邮箱中必须包含@');       flag=false;    }         if(value.indexOf(".")==-1){       alert('邮箱中必须包含.');       flag=false;     }  return flag;   }$(function(){var myform=$("form"); myform.submit(function(){   return checkEmail();   });});  */function yname(num) {var ename = $("[id=email]").val().length;if (ename < 6) {$("#semail").text("不合法");num = 1;} else {$("#semail").text("合法");}return num;} function pass(num) {var ename = $("[id=pwd]").val().length;if (ename < 6) {$("#spwd").text("不合法");num = 1;} else {$("#spwd").text("合法");}return num;}$(function() {  var myforms=$("form");  myforms.submit(function() {var num1 = yname(0);var num2 = pass(0);var sum = num1 + num2;if (sum > 0) {return false;}return true;});});</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="tiao.jsp" method="post" id="myform" name="myform" >                            <tr>                                <td>Email：<input id="email" type="text" name="email" class="inputs" /><span id="semail"></span></td>                            </tr>                            <tr>                                <td> 密码：<input id="pwd" type="password" name="pwd" class="inputs" /><span id="spwd"></span></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>

效果

0 0