经过应用jQuery,JS验证邮件地址格式方法小结

作者: 网络应用  发布:2019-09-03

正文实例陈说了JS验证邮件地址格式方法。分享给大家供大家参谋,具体如下:

页面样式代码:

示例1:

复制代码 代码如下:

复制代码 代码如下:

<style type="text/css">
.header
{
background-color: #CCCCCC;
color: White;
font-size: x-large;
}
.content
{
background-color: White;
font-weight: lighter;
font-size: small;
}
.content td
{
text-align: left;
}
.mandatory
{
color: Red;
}
.errorContainer
{
display: none;
margin-bottom: 20px;
}
.alertMsg
{
margin-left: 20px;
color: #660000;
}
.input-highlight
{
background-color: #CCCCCC;
}
</style>

<asp:TextBox ID="txt_Email" runat="server" onblur="checkRate(this.id)"></asp:TextBox>

页面结构代码:

function checkRate(input)
{
  var re = /^[_".0-9a-z-]+@([0-9a-z][0-9a-z-]+".){1,4}[a-z]{2,3}$/i;  
  var nubmer = document.getElementById(input).value;
   if (!re.test(nubmer))
  {
    alert("请输入正确格式的邮件地址");
    document.getElementById(input).value = "";
    return false;
   }
}

复制代码 代码如下:

示例2:

<form id="form1" runat="server">
<div align="center">
<div align="center" class="errorContainer">
<fieldset style="width: 550px;">
<p align="left" class="alertMsg">
此地有一部分颠倒是非注册提醒音讯,依据提醒请查证您注册音信格式是或不是正确:
</p>
</fieldset>
</div>
<fieldset style="width: 350px; height: 400px">
<table cellpadding="3" cellspacing="3" border="0" class="content">
<tr>
<td colspan="2" class="header" style="text-align: center;">
挂号客户
</td>
</tr>
<tr>
<td>
用户名<span class="mandatory">*</span>
</td>
<td>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Email<span class="mandatory">*</span>
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
密码<span class="mandatory">*</span>
</td>
<td>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
</td>
</tr>
<tr>
<td>
确认密码<span class="mandatory">*</span>
</td>
<td>
<asp:TextBox ID="txtConfirmPwd" runat="server" TextMode="Password"></asp:TextBox>
</td>
</tr>
<tr>
<td>
生日<span class="mandatory">*</span>
</td>
<td>
<asp:TextBox ID="txtDOB" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
地址1<span class="mandatory">*</span>
</td>
<td>
<asp:TextBox ID="txtAddress1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
地址2
</td>
<td>
<asp:TextBox ID="txtAddress2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
邮政编号<span class="mandatory">*</span>
</td>
<td>
<asp:TextBox ID="txtPostal" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
网站
</td>
<td>
<asp:TextBox ID="txtWebsite" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<asp:CheckBox ID="chkTandC" runat="server" />小编接受相关法律条约
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<asp:Button ID="btnSubmit" Text="提交" runat="server" /> <asp:Button ID="btnReset"
Text="重置" runat="server" />
</td>
</tr>
</table>
</fieldset>
</div>
</form>

<script type="text/javascript">
function isValidMail() {
  var TextVal = document.getElementById("TextBox1").value;
  var Regex = /^(?:w+.?)*w+@(?:w+.)*w+$/;
  if (Regex.test(TextVal)){
  alert(true);
  }
  else {
  if (TextVal == "") {
    alert("请输入电子邮件地址!!");
  return false;
  }
  else {
  alert("您好,你输入不正确,请重新输入;");
   document.getElementById("TextBox1").value = "";
  return false;
    }
  }
}
</script>

剧本代码:

复制代码 代码如下:

先引进脚本文件:

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>   
<asp:Button ID="Button3" runat="server" Text="Button"  OnClientClick="return isValidMail()" OnClick="Button3_Click" />

复制代码 代码如下:

瞩望本文所述对我们JavaScript程序设计有着支持。

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="Scripts/jquery.form.js" type="text/javascript"></script>

您也许感兴趣的稿子:

  • node.js使用nodemailer发送邮件实例
  • Nodejs中读取汉语文件编码难题、发送邮件和按时任务实例
  • 依据Node.js完毕nodemailer邮件发送
  • 纯javascript实现活动发送邮件
  • js正则表明式验证邮件地址
  • 用JS输入email的代码,防止垃圾邮件
  • 简轻巧单几行JS Code实现IE邮件转载今日头条和讯
  • javascript落实Email邮件彰显与删除成效
  • javascript验证邮件地址和MX记录的措施
  • 运用Node.JS完毕邮件发送功用

剧本功效代码:

复制代码 代码如下:

<script type="text/javascript">
$(document).ready(function () {
// 在这里安装暗许的操作行为
$.validator.setDefaults({
highlight: function (input) {
$(input).addClass("input-highlight");
},
unhighlight: function (input) {
$(input).removeClass("input-highlight");
}
});

// 然后调用函数validate()起初对form校验
$("#form1").validate({
rules: { txtName: "required",
// 验证邮件格式是或不是科学,设置email属性为true
txtEmail: { required: true, email: true },
txtPassword: { required: true, minlength: 8 },
// 在此间equalTo属性的功效是说显明认密码必得和前面输入的密码相等
txtConfirmPwd: { required: true, minlength: 8, equalTo: "#txtPassword" },
// 验证日期格式是还是不是正确,设置date属性为true;
txtDOB: { required: true, date: true },
// 通过质量maxlength设置文本最大尺寸
txtAddress1: { required: true, maxlength: 200 },
txtAddress2: { maxlength: 200 },
// digits属性设置输入的内容必得为数字
txtPostal: { required: true, digits: true },
// url属性验证是或不是输入为合法的网站
txtWebsite: { url: true },
chkTandC: "required"
},
messages: { txtName: "请输入您的全名",
txtEmail: { required: "请输入您的Email",
email: "请输入叁个官方的email地址"
},
txtPassword: { required: "请输入您的密码",
minlength: "密码长度必得高于8"
},
txtConfirmPwd: { required: "请输入您的确认密码",
minlength: "确认的密码长度必得超越8",
equalTo: "请保管道输送入的密码和认同的密码要一律"
},
txtDOB: { required: "请输入您的出生之日",
date: "您输入的湖州日期格式不对"
},
txtAddress1: { required: "请输入您的地址1",
maxlength: "您输入的地址1尺寸不能够领先200"
},
txtAddress2: { maxlength: "您输入的地点1长短无法超越200" },
txtPostal: { required: "请输入您的邮政编号",
digits: "您输入的邮政编号必需都为数字"
},
txtWebsite: { url: "请输入三个合法的网站" },
chkTandC: { required: "请接受有关法规条文" }
},
wrapper: "li",
errorContainer: $("div.errorContainer"),
errorLabelContainer: $("#form1 p.alertMsg")
});

$("#btnReset").click(function (e) {
e.preventDefault();
// 这里运用了插件form的resetForm()函数,恢复生机到第一次加载页面包车型大巴情事
$("#form1").resetForm();
});
});
</script>

细心:样式选拔器div.errorContainer和div .errorContainer的含义不雷同,第一个是选拔具备带样式类errorContainer的div成分,而第叁个是选项div成分里面包车型大巴后代全数带样式类errorContainer的成分。
谈起底效果图:

图片 1

你可能感兴趣的篇章:

  • jQuery ajax MD5达成客户注册即时表明作用
  • JQuery validate插件验证客户注册音讯
  • 采用struts2+Ajax+jquery验证客户名是还是不是已被登记
  • jquery+ajax完毕挂号实时验证实例详解
  • PHP+jQuery 注册模块的创新(一):验证码存入SESSION
  • struts2+jquery组合验证注册顾客是或不是留存
  • jQuery实现用户注册的表单验证示例
  • 选择jQuery validate 验证注册表单实例演示
  • Asp.net下行使Jquery Ajax实现客商注册检验(验证客户名是还是不是存)
  • 最原始的jQuery注册认证格局

本文由王中王开奖结果发布于网络应用,转载请注明出处:经过应用jQuery,JS验证邮件地址格式方法小结

关键词: