您的位置：首页 > Web前端 > JQuery

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

2017-01-03 17:34 316 查看

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

代码如下所示：

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航