使用JavaScript进行表单验证
程序员文章站
2022-03-01 14:51:32
...
在客户端提交数据时，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][email protected]([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>
推荐阅读