jQuery表单校验

最新推荐文章于 2024-06-29 14:47:07 发布

罒Mr.L

最新推荐文章于 2024-06-29 14:47:07 发布

阅读量937

点赞数

本文链接：https://blog.csdn.net/qq_36074053/article/details/71122922

版权

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- ./?%&=]*)?

罒Mr.L

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery表单校验

1.登陆表单校验 2.html //第一步;当我点击登录按钮的时候，提交表单，也就是将表单中打有name属性的标签的value值提交到表单 //的 action属性值指向的地址 function checkEmail(){ var flag=true; //1.锁定对象 var do
复制链接

扫一扫