使用JavaScript进行表单验证

在客户端提交数据时，JavaScript表单验证能减轻服务器压力、确保提交数据的准确性与完整性，所以表单验证是有必要的。
一般地，如果客户端提交的数据不完整(不准确)，表单验证会进行弹框提示或者高亮提示标签。
常见的表单验证有：
1.非空验证(例如：用户名和密码必填)
2.正则验证(例如：正确的邮箱格式)
3.其他验证(例如：两次输入的密码需一致、性别必须单选、爱好必须选择指定数目)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用JavaScript进行表单验证</title>
<script>
/*脚本对象化：将需要验证的方法构成集合*/
function Check()
{
/*非空验证*/
this.chekNotNull=function(id)      {   var obj=document.getElementById(id);/*通过传递的参数id获得目标对象*/            if(obj.value!='')/*如果验证对象的值不为空*/                 {                       return true;                    }                   else                    {                       return false;               }
}
/*正则验证*/
this.checkEmail=function(id)
{var obj=document.getElementById(id);/*通过传递的参数id获得目标对象*/                   var reg=/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;/*邮箱正则表达式*/                if(reg.test(obj.value))/*如果对象的值符合正则表达式*/                    {                       return true;                    }                   else                    {                       return false;                   }
}
/*性别必选*/
this.checkSex=function(name)
{var obj=document.getElementsByName(name);/*通过传递的参数name获得目标对象*/        for(var i=0;i<obj.length;i++)/*遍历单选按钮*/{      if(obj[i].checked)/*如果有单选按钮选中*/                     {                           return true;                        }                   }                   return false;
}
/*爱好多选*/
this.checkHobby=function(name,num)/*通过传递的参数name获得爱好复选框对象,num作为要至少要选择的爱好的数量*/
{                   var x=0;/*初始化计数器为0*/       var obj=document.getElementsByName(name);/*获得复选框对象*/                   for(var i=0;i<obj.length;i++)/*遍历复选框*/                    {                          if(obj[i].checked)/*如果存在复选框选中，计数器自增*/                 {                           x++;                      } }                 if(x<num)/*如果用户选择的爱好数量小于指定的数量*/                  {                       return false;                   }                   else                    {                       return true;                }
}
/*密码一致*/
this.checkEuqal=function(id1,id2)              {                   var obj1=document.getElementById(id1);/*获得验证对象1*/                  var obj2=document.getElementById(id2);/*获得验证对象2*/              if(obj1.value==obj2.value)/*如果两个对象的值相等*/                  {                       return true;                    }                   else                    {                       return false;                   }               }
}
/*具体操作*/
var checkObj=new Check();/*创建验证对象*/
/*非空验证用户名*/
function checkName()
{    if(!checkObj.chekNotNull('txtName'))/*传递用户名控件的id，如果其值为空*/ {                       alert('请输入用户名！');  return false;                   }
}
/*验证两次输入的密码需要一致*/
function checkPwdEqual()
{                   if(!checkObj.checkEuqal('txtPwd','txtRePwd'))/*分别传递密码控件、确认密码控件的id，如果二者的值不相等*/                    {                       alert('两次输入的密码不一致！');       return false;                  }
}
/*验证邮箱的格式*/
function checkEmail()
{                    if(!checkObj.checkEmail('txtEmail'))/*传递邮箱控件的id，如果其值不符合邮箱的正则表达式*/                 {alert('邮箱格式不正确！');        return false;               }
}
/*验证用户有无选中性别*/
function checkSex()
{               if(!checkObj.checkSex('sex'))/*传递性别单选按钮控件的name，如果没有单选按钮选中*/{                       alert('请选择性别！');       return false;               }
}
/*验证用户选中爱好的数量*/
function checkHobby()
{                   if(!checkObj.checkHobby('hobby',3))/*传递爱好复选框控件的name，如果选择的爱好数量小于3*/                 {                       alert('请至少选择3种爱好！');       return false;                   }
}
</script>
</head>
<body>
<!--当表单提交时，触发onsubmit事件，返回值为true时，表单将会提交-->
<form onsubmit="return checkHobby();">
<table border="1" cellpadding="0" cellspacing="0">           <tr><td>用户名：</td>
<td>
<input type="text" placeholder="请输入用户名：" id="txtName" />
</td>
</tr><tr>
<td>密码：</td>
<td>
<input type="password" placeholder="请输入密码：" id="txtPwd" />
</td>
</tr> <tr>
<td>确认密码：</td>
<td>
<input type="password" placeholder="请再次输入密码：" id="txtRePwd" />
</td>
</tr>         <tr>
<td>性别：</td>
<td>
<!--一定要name属性相同，单选按钮才能实现单选-->
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
</td>
</tr>         <tr>
<td>邮箱：</td>
<td>
<input type="text" placeholder="请输入合法的邮箱：" id="txtEmail" />
</td>
</tr>         <tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby"/>篮球
<input type="checkbox" name="hobby"/>羽毛球
<input type="checkbox" name="hobby"/>足球
<input type="checkbox" name="hobby"/>乒乓球
</td>
</tr> <tr>
<td colspan="2" align="center">
<input type="submit"/>
</td>
</tr></table>
</form>
</body></html>

使用JavaScript进行表单验证相关推荐

第一百五十一节，封装库--JavaScript，表单验证--密码确认验证--回答验证--电子邮件验证加自动补全...
封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全效果图 html <div id="reg"><h2 class= ...
JavaScript常用表单验证
JavaScript常用表单验证目录: 1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长度限制 2.:js判断汉字.判断是否汉字 .只能输入汉字 3:js判 ...
JavaScript - JavaScript通用表单验证函数(实例)
Check.js JS函数文件 /* *--------------- 客户端表单通用验证CheckForm(oForm) ----------------- * 功能:通用验证所有的表单元素. ...
JavaScript通用表单验证函数
表单定义: < form name = " form1 " action = "" style = " behavior:url('form ...
JavaScript 正则表达式表单验证
案例:表单验证 Html <body onload="loading()"><h1>欢迎来到***注册页面</h1><form onsub ...
JavaScript的表单验证
1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert("不能超过50个字 ...
HTML进行表单验证
文章目录使用JavaScript进行表单验证使用html5自带的特性进行验证: 使用JavaScript进行表单验证表单样式: <form action="" name ...
(转)强大的JQuery表单验证插件 FormValidator使用介绍
jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...
强大的JQuery表单验证插件 FormValidator使用介绍
jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...
Validate 表单验证用法说明
前言 Validate 是 jQuery 的一个子插件, 该插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足用户的各种验证需求.该插件捆绑了一套有用的验证方法 ...

使用JavaScript进行表单验证

使用JavaScript进行表单验证相关推荐

最新文章

热门文章