JavaScript 实现表单非空与邮箱格式验证

作者：拾光时间：2026-10-23 01:23:40浏览：163

本文提供JavaScript实现的表单验证示例，涵盖非空验证与邮箱格式校验。通过onblur事件触发检查函数，利用正则表达式匹配邮箱规则，并在输入为空或格式错误时弹出提示并聚焦字段，帮助开发者快速集成基础前端校验逻辑。

非空验证实现

首先介绍非空验证的实现方式。在HTML表单中，通常通过提交按钮的onclick事件调用检查函数。以姓名为例，获取输入框元素后判断其value是否为空字符串。若为空，则弹出提示框告知用户必须输入姓名，并将焦点重新定位到该输入框，最后返回false以阻止表单提交。


<body>
<table>
<tr>
<td>姓名：</td>
<td><input type="text" name="TrueName" id="TrueName" /></td>
</tr>
....省略其他input
<tr>
<td colspan="2">
<input type="submit" value="submit" onclick="return check();" />
</td>
</tr>
</table>

</body>

<script language="JavaScript">
function Check()
{
 if(document.getElementById('TrueName').value=='') {
 alert('必须输入姓名！');
 document.getElementById('TrueName').focus();
 return false;
 }

 if(document.getElementById('Identity').value=='') {
 alert('必须输入身份证号码！');
 document.getElementById('Identity').focus();
 return false;
 }

 if(document.getElementById('Tel').value=='') {
 alert('必须输入联系电话！');
 document.getElementById('Tel').focus();
 return false;
 }

 if(document.getElementById('Address').value=='') {
 alert('必须输入联系地址！');
 document.getElementById('Address').focus();
 return false;
 }

 if(document.getElementById('WebID').value=='') {
 alert('必须设置员工账号！');
 document.getElementById('WebID').focus();
 return false;
 }

 if(document.getElementById('PassWord').value=='') {
 alert('密码不能为空！');
 document.getElementById('PassWord').focus();
 return false;
 }

 if(document.getElementById('PassWord').value!=document.getElementById('RPass').value) {
 alert('两次输入的密码不一致！');
 document.getElementById('PassWord').focus();
 return false;
 }
}
</script>

<script language="JavaScript">
function Check()
{
 if(document.getElementById('TrueName').value=='') {
 alert('必须输入姓名！');
 document.getElementById('TrueName').focus();
 return false;
 }

 if(document.getElementById('Identity').value=='') {
 alert('必须输入身份证号码！');
 document.getElementById('Identity').focus();
 return false;
 }

 if(document.getElementById('Tel').value=='') {
 alert('必须输入联系电话！');
 document.getElementById('Tel').focus();
 return false;
 }

 if(document.getElementById('Address').value=='') {
 alert('必须输入联系地址！');
 document.getElementById('Address').focus();
 return false;
 }

 if(document.getElementById('WebID').value=='') {
 alert('必须设置员工账号！');
 document.getElementById('WebID').focus();
 return false;
 }

 if(document.getElementById('PassWord').value=='') {
 alert('密码不能为空！');
 document.getElementById('PassWord').focus();
 return false;
 }

 if(document.getElementById('PassWord').value!=document.getElementById('RPass').value) {
 alert('两次输入的密码不一致！');
 document.getElementById('PassWord').focus();
 return false;
 }
}
</script>

邮箱格式验证

接着演示邮箱格式验证。该验证通常绑定在文本框的onblur事件上，即当用户焦点离开输入框时触发。函数首先获取邮箱字段的值，若为空则提示用户输入并返回false。若存在值，则使用正则表达式/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/进行匹配。若匹配成功返回true，否则提示邮箱格式不正确并返回false。


<script type="text/javascript">
//验证邮箱格式
function isEmail() 
{
  var email=document.getElementById("zh_e").value;
 if(email=="")
 {
 alert("请输入邮箱！");
  document.getElementById("zh_e").focus();
  return false; 
 }
 var pattern= /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
 strEmail=pattern.test(email);
   if (strEmail)
    { 
 return true;
 }
 else
   {
 alert("邮箱格式不正确！");
 }
}
</script>
实现功能：当鼠标焦点离开文本框时触发该事件。onblur=“isEmail” [ onblur()失去焦点时触发事件 ]
<body>
<input type="text" maxlength="32" style="width:220px;" onblur="isEmail()" id="zh_e"/>
</body>

以上这篇JS非空验证及邮箱验证的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。

作者最新文章

JS处理含Emoji或中文的字符串转数组乱码问题

2026-11-05 16:12:28

JS怎么使用展开运算符合并对象

2026-11-05 14:42:18

ES6+环境下判断JS对象为空的简洁写法

2026-11-05 12:12:23

怎么通过replacer函数自定义JS中JSON的格式化输出

2026-11-05 11:19:44

JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符

2026-11-05 11:16:58