表单校验的常见内容包括验证输入是否为空，验证数据格式是否正确，验证数据的范围，验证数据的长度等。
在表单校验中通常需要用到String对象的成员，包括indexOf( )，substring( )和length等。
表单校验中常用的两个事件是onsubmit和onblur，常用来激发验证。
使用正则表达式可验证用户输入的内容，如验证电子邮箱地址，电话号码等。
定义正则表达式有两种构造形式，一种是普通方式，另一种是构造函数的方式。
正则表达式的模式分为简单模式和复合模式。
通常使用RegExp对象的test( )方法检测一个字符串是否匹配某个模式。
String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法。
使用表单选择器和表单属性过滤器可以方便的获取匹配的表单元素。
<!DOCTYPE html>
<html>
<head>
<title>peny.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<script type="text/javascript">
<!--
function check(){
var flu=true;
var dom=$("[id=email]");
var value=dom.val();
if(value.indexOf("@")==-1){
alert('邮箱中必须包含@');
flu=false;
}
if(value.indexOf(".")==-1){
alert('邮箱中必须包含.');
flu=false;
}
return flu;
}
$(function(){
var myform=$("form");
myform.submit(function(){
return check();
});
});
-->
function one(num){
var email=$("[id=email]").val().length;
if(email<6){
$("#em").text('邮箱不合法');
num=1;
}else{
$("#em").text('邮箱合法');
}
return num;
}
function two(num){
var pwd=$("[id=pwd]").val().length;
if(pwd<6){
$("#pw").text('密码不合法');
num=1;
}else{
$("#pw").text('密码合法');
}
return num;
}
$(function(){
//表单提交拦截
$("form").submit(function(){
var num1=one(0);
var num2=two(0);
var sun=num1+num2;
if(sun>0){
return false;
}
return true;
});
});
</script>
</head>
<body>
<div id="header" class="main">
<div id="headerLeft">
<img src="img/logo.gif" /></div>
<div id="headerRight">注册 | 登录 | 帮助</div>
</div>
<div class="main">
<table id="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="img/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="MyHtml.html" method="post" id="myform" name="myform" >
<tr>
<td>Email：<input id="email" type="text" name="email" class="inputs" /><span id="em"></span></td>
</tr>
<tr>
<td> 密码：<input id="pwd" type="password" name="pwd" class="inputs" /><span id="pw"></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="img/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>
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<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(./img/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(./img/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">
</script>
</head>
<body>
<div id="header" class="main">
<div id="headerLeft"><img src="img/logo.gif"/></div>
<div id="headerRight">注册 | 登录 | 帮助</div>
</div>
<div class="main">
<table id="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bold">祝贺你，登录休闲网成功！</td>
</tr>
</table>
</div>
<div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a> | <a href="#">帮助中心</a></div>
</body>
</html>
416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
