jquery验证邮箱、手机、身份证号码

来源：互联网发布：北海旅游知乎编辑：程序博客网时间：2024/04/28 06:20

在做项目时，对于用户信息经常需要对邮箱、手机、以及身份证进行验证，所以做了这样的一个小案例。

代码如下所示：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="02jquery验证邮箱、手机、是否为空.aspx.cs" Inherits="_02jquery验证邮箱_手机_是否为空" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>    <style type="text/css">        table { border-collapse:collapse;}        .tdRight { text-align:right; width:100px; }    </style>    <script type="text/javascript">        function chkSubmit() {            if ($('#txtUserName').val() == "") {                alert("请输入姓名");                $('#txtUserName').focus();                return false;            }            if ($('#txtUserPhone').val() == "") {                alert("请输入手机");                $('#txtUserPhone').focus();                return false;            }            else {                var str = $('#txtUserPhone').val();                var reg = /^1[34578]\d{9}$/;                if (!reg.test(str)) {                    alert('您的手机格式不正确');                    return false;                }            }            if ($('#txtUserEmail').val() == "") {                alert("请输入邮箱");                $('#txtUserEmail').focus();                return false;            }            else            {                var str = $('#txtUserEmail').val();                var reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;                if (!reg.test(str))                {                    alert('您的邮箱格式不正确');                    return false;                }            }            if ($('#txtIDCard').val() == "") {                alert("请输入身份证号码");                $('#txtIDCard').focus();                return false;            }            else {                var str = $('#txtIDCard').val();                var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;                if (!reg.test(str)) {                    alert('您的身份证不正确');                    return false;                }            }        }    </script></head><body>    <form id="form1" runat="server">        <table border="0">            <tr>                <td class="tdRight">姓名:</td>                <td><asp:TextBox runat="server" ID="txtUserName" Width="150"></asp:TextBox></td>            </tr>            <tr>                <td class="tdRight">手机:</td>                <td><asp:TextBox runat="server" ID="txtUserPhone" Width="150"></asp:TextBox></td>            </tr>                        <tr>                <td class="tdRight">邮箱:</td>                <td><asp:TextBox runat="server" ID="txtUserEmail" Width="150"></asp:TextBox></td>            </tr>            <tr>                <td class="tdRight">身份证号码:</td>                <td><asp:TextBox runat="server" ID="txtIDCard" Width="150"></asp:TextBox></td>            </tr>            <tr>                <td></td>                <td>                    <asp:Button runat="server" Text="提交" OnClientClick="return chkSubmit()"/>                </td>            </tr>        </table>    </form></body></html>

以上是完整的代码，思路就是点击提交时，验证数据的完整性，并验证邮箱、手机、身份证是否是正确形式，若是则继续，若有为空或数据格式不正确则弹窗显示。

对于

alert("请输入姓名");$('#txtUserName').focus();

这类重用较高的方法可以写方法进行简化

//提示并选中function alertFocus(objIdx, txt) {    alert(txt);    $(objIdx).focus().select();}

在浏览器中直接进行查看，可用快捷键Ctrl+Shift+W。

页面如下所示：

其他的一些验证方法可以参考网上资料，比如：http://www.jb51.net/article/94332.htm

0 0