您的位置: 首页  >  文章  >  6.7表单验证和正则表达式

6.7表单验证和正则表达式

分类: 文章 • 2024-09-06 12:44:40

一、为什么进行表单验证

    1、减轻服务器压力

    2、保证输入的数据符合要求

    3、常见的表单验证

            a、日期格式

            b、表单元素是否为空

            c、用户名和密码

            d、email地址

            e、身份证号码

二、表单选择器

1、用于选取某些特定的表单元素，比如所有单选按钮或隐藏元素；

表单选择器的具体方法描述：

6.7表单验证和正则表达式

注意事项：

除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password') == $('[type=password]')

2、事件有三要素：事件源、事件数据、事件处理程序

事件冒泡：当元素嵌套的时候，内部元素激发某个事件后，默认情况下外部元素相应的事件也会跟着依次触发

可以加return false;是阻止默认操作

onclick: 鼠标单击触发

ondblclick: 双击触发

onmouseover: 鼠标移动上面触发

onmouseout: 鼠标离开时触发

onmousemove: 鼠标在上面移动时触发

onchange: 只要内容改变触发

onblur: 失去焦点时触发

onfocus: 获得焦点时触发

onkeydown: 按键按下的时候触发

onkeyup：按键抬起来的时候触发

onkeypress：事件在用户按下并放开任何字母数字键时发生。但是系统按钮（例如：箭头键、功能键）无法得到识别。


<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>休闲网登录页面</title>
 <link href="css/register.css" rel="stylesheet">
</head>
<body>
 <div id="header" class="main">
 <div id="headerLeft">
 <img src="images/logo.gif" /></div>
 <div id="headerRight">注册 | 登录 | 帮助</div>
 </div>
 <div class="register">
 <form action="success.html" id="myform" method="post" name="myform" >
 <ul>
 <li class="bold">登录休闲网</li>
 <li><span>Email：</span><input type="text" class="inputs" onblur="denglu()" />
 <span id="first" style="height: 20px;width: 100px ;"></span></li>
 <li><span>密码：</span><input type="password" class="inputs" onblur="mima()"/></li>
 <li><input name="btn" id="btn" type="submit" value="登录" class="rb1" /></li>
 </ul>
 </form>
 </div>
 <div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a> | <a href="#">帮助中心</a></div>
 <script src="js/jquery-1.12.4.js"></script>

<script type="text/javascript">


$(document).ready(function () {
   $("form").submit(function () {//submit()提交表单
$("input[type='password']").blur(function () {
$("input[type='password']").css({"border":"red 2px solid"})
})
var email=$("input[type='text']").val();   //val()获取input的值
if (email.indexOf("@")==-1||email==null||email==""){/indexOf()判断字符串是否包含“@”
// alert("邮箱不能为空！");
 var str="邮箱不能为空！";
$("input[type='text']+span").html(str);
return false;
}
}


var pwd=$("input[type='password']").val();
if (pwd==""||pwd==null){
alert("密码不能为空！");
} else if (pwd.length<6){//substring.length验证密码长度
alert("密码长度不能小于6位。");
}
for (var i=0;i<pwd.length;i++){//for循环判断单个字符是否是数字
var a=pwd.substr(i,i+1);//截取1位数字
 if (!isNaN(a)){
alert("密码不能为数字！");
return false;
}
}

    })
})


三、常用正则表达式：


匹配国内电话号码：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- ./?%&=]*)? 




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<div style="border: #d32c47 1px solid">
    <p>邮政编码：<input type="text" id="email" name="email"><span></span></p>
    <p>手机号：<input type="text"id="phone" name="phone"><span></span></p>
</div>
<script src="../../jquery-1.12.4.js"></script>
<script>
    $(document).ready(function () {
        $("#email").blur(function () {
            var str=$(this).val();
            var regNode=/^\d{6}$/;
            if (!regNode.test(str)){
                $("#email").next().html("邮箱输入有误！");
                return false;
            }
        });
        $("#email").focus(function () {
            $(this).next().html("")
        });

        $("#phone").blur(function () {
            var phone=$(this).val();
            var exc=/^1\d{10}$/;
            if (!exc.test(phone)){
                $(this).next().html("输入的电话号码有误！");
                return false;
            }
        })
        $("#phone").focus(function () {
            $(this).next().html("");
        })
    })



</script>
</body>



</html>

































															

																					

								

									相关推荐