1.登陆表单校验
<!DOCTYPE html>
<html>
<head>
<title>2.html</title>
<script type="text/javascript" src="js/jquery-1.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>
<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>
</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="3.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>
登陆验证页面
<!DOCTYPE html>
<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">
</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 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>
2.表单验证常用的方法和事件
1、表单验证<form></form>
(1).非空验证(去空格)
(2).对比验证(跟一个值对比)
(3).范围验证(根据一个范围进行判断)
(4).固定格式验证:电话号码,身份证号,邮箱,信用卡号等的验证;需要用到正则表达式来进行验证。
(5).其它验证
2、正则表达式
用符号来描述书写规则:/ 中间写正则表达式 /
^ :匹配开头,$:匹配结尾 ; /^ve/以ve开头的 /ve$/以ve结尾
\d:一个任意的数字
\w:一个任意的数字或字母
\s:一个任意的字符串
{n}:把左边的表达式重复n遍
{m,n}:把左边的表达式重复至少m遍,至多n遍 {m, }:把左边的表达式重复至少m遍,,至多不限
+:左边的表达式,至少出现一次,至多不限,相当于{1,}
*:左边的表达式,至少出现0次,至多不限,相当于{0,}
?:左边的表达式,至少出现0次,至多出现1次,相当于{0,1}
[a,b,c]:只能取方括号中内容之一
[a-z]或[1-9]:在范围中取其一
|:代表或者; ():优先级; \:转义--“\( \)”这个才是要出现的小括号,需要转义
3、事件
事件有三要素:事件源、事件数据、事件处理程序
事件冒泡:当元素嵌套的时候,内部元素激发某个事件后,默认情况下外部元素相应的事件也会跟着依次触发
可以加return false;是阻止默认操作
onclick: 鼠标单击触发
ondblclick: 双击触发
onmouseover: 鼠标移动上面触发
onmouseout: 鼠标离开时触发
onmousemove: 鼠标在上面移动时触发
onchange: 只要内容改变触发
onblur: 失去焦点时触发
onfocus: 获得焦点时触发
onkeydown: 按键按下的时候触发
onkeyup:按键抬起来的时候触发
onkeypress:事件在用户按下并放开任何字母数字键时发生。但是系统按钮(例如:箭头键、功能键)无法得到识别。
正则表达式补充:
建立正则表达式的方法:
var patten= new RegExp(/^[0-9]{17}[0-9|X]$/);/*RegExp()括号里面的式子需要自己定义:
1、[]里面只有一个元素
2、()里面可以写一个单词或者式子
3、{}里面表示数量
4、^:以某个元素开头,写在元素前面
5、$:以某个元素结束,写在元素后面*/
例:
1、正则表达式验证身份证:
身份证:<input type="text" id="1" />
/*javascript部分*/
var a= document.getElementById("1").value;
var patten= new RegExp(/^[0-9]{17}[0-9|X]$/);
if(patten.test(a))
{
alert("输入正确");
}
else
{
alert("输入错误");
}
2、正则表达式验证邮箱:
邮箱:<input type="text" id="2" /><input type="button" value="提交" οnclick="mail()" />
function mail()
{
var patten2=new RegExp(/^[0-9|A-z|_]{1,17}[@][0-9|A-z]{1,3}.(com)$/)
var mail = document.getElementById("2").value;
if(patten2.test(mail))
{
alert("输入正确");
}
else
{
alert("输入错误");
}
}
常用正则表达式:
匹配国内电话号码:d{3}-d{8}|d{4}-d{7} 评注:匹配形式如 0511-4405222 或 021-87888822
匹配腾讯QQ号:[1-9][0-9]{4,} 评注:腾讯QQ号从10000开始
匹配中国邮政编码:[1-9]d{5}(?!d) 评注:中国邮政编码为6位数字
匹配身份证:d{15}|d{18} 评注:中国的身份证为15位或18位
匹配ip地址:d+.d+.d+.d+ 评注:提取ip地址时有用
匹配特定数字:
^[1-9]d*$ //匹配正整数
^-[1-9]d*$ //匹配负整数
^-?[1-9]d*$ //匹配整数
^[1-9]d*|0$ //匹配非负整数(正整数 + 0)
^-[1-9]d*|0$ //匹配非正整数(负整数 + 0)
^[1-9]d*.d*|0.d*[1-9]d*$ //匹配正浮点数
^-([1-9]d*.d*|0.d*[1-9]d*)$ //匹配负浮点数
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$ //匹配浮点数
^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$ //匹配非负浮点数(正浮点数 + 0)
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$ //匹配非正浮点数(负浮点数 + 0)
评注:处理大量数据时有用,具体应用时注意修正
匹配特定字符串:
^[A-Za-z]+$ //匹配由26个英文字母组成的字符串
^[A-Z]+$ //匹配由26个英文字母的大写组成的字符串
^[a-z]+$ //匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$ //匹配由数字和26个英文字母组成的字符串
^w+$ //匹配由数字、26个英文字母或者下划线组成的字符串
在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下:
只能输入数字:“^[0-9]*$”
只能输入n位的数字:“^d{n}$”
只能输入至少n位数字:“^d{n,}$”
只能输入m-n位的数字:“^d{m,n}$”
只能输入零和非零开头的数字:“^(0|[1-9][0-9]*)$”
只能输入有两位小数的正实数:“^[0-9]+(.[0-9]{2})?$”
只能输入有1-3位小数的正实数:“^[0-9]+(.[0-9]{1,3})?$”
只能输入非零的正整数:“^+?[1-9][0-9]*$”
只能输入非零的负整数:“^-[1-9][0-9]*$”
只能输入长度为3的字符:“^.{3}$”
只能输入由26个英文字母组成的字符串:“^[A-Za-z]+$”
只能输入由26个大写英文字母组成的字符串:“^[A-Z]+$”
只能输入由26个小写英文字母组成的字符串:“^[a-z]+$”
只能输入由数字和26个英文字母组成的字符串:“^[A-Za-z0-9]+$”
只能输入由数字、26个英文字母或者下划线组成的字符串:“^w+$”
验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为:以字母开头,长度在6-18之间, 只能包含字符、数字和下划线。
验证是否含有^%&'',;=?$"等字符:“[^%&'',;=?$x22]+”
只能输入汉字:“^[u4e00-u9fa5],{0,}$”
验证Email地址:“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”
验证InternetURL:“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$”
验证电话号码:“^((d{3,4})|d{3,4}-)?d{7,8}$” 正确格式为:“XXXX-XXXXXXX”,“XXXX-XXXXXXXX”,“XXX-XXXXXXX”, “XXX-XXXXXXXX”,“XXXXXXX”,“XXXXXXXX”。
验证身份证号(15位或18位数字):“^d{15}|d{}18$”
验证一年的12个月:“^(0?[1-9]|1[0-2])$”正确格式为:“01”-“09”和“1”“12”
验证一个月的31天:“^((0?[1-9])|((1|2)[0-9])|30|31)$” 正确格式为:“01”“09”和“1”“31”。
匹配中文字符的正则表达式: [u4e00-u9fa5]
匹配双字节字符(包括汉字在内):[^x00-xff]
匹配空行的正则表达式:n[s| ]*r
匹配HTML标记的正则表达式:/<(.*)>.*|<(.*) />/
匹配首尾空格的正则表达式:(^s*)|(s*$)
匹配Email地址的正则表达式:w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
匹配网址URL的正则表达式:http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?