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

最新推荐文章于 2020-10-13 14:14:45 发布

had_meno

最新推荐文章于 2020-10-13 14:14:45 发布

阅读量685

点赞数

本文链接：https://blog.csdn.net/had_meno/article/details/53996399

版权

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

代码如下所示：

<%@ 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

had_meno

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery验证邮箱、手机、身份证号码

在做项目时，对于用户信息经常需要对邮箱、手机、以及身份证进行验证，所以做了这样的一个小案例。代码如下所示： table { border-collapse:collapse;} .tdRight { text-align:right; width:100px; } fun
复制链接

扫一扫