表单验证的简单方法

zifa 2007-07-19 09:22:43

FormValid 0.3 完整功能版（不写JS实现表单验证）
http://coderhome.net/demo/FormValid/

FormValid 0.3 完整功能版简介：完全通过html不需要写JS验证程序就可以实现表单验证功能，可支持一个表单元件多条件验证，
同一页面多表单可同时使用，和服务端程序无关系，完全客户端方式。

Demo1 基本使用方法
Demo2 自定义错误信息显示方式1
Demo3 自定义错误信息显示方式2
Demo4 所有判断规则
Demo5 自定义正则规则
Demo6 自定义函数规则

特性：

使用方法：在要验证的表单(form)中加上
在要验证的表单元件中设置元件，valid(验证规则),errmsg（提示消息），多个验证使用|作为分隔！

验证规则参数：
required 必填
eqaul 和另一元件对比值是否相同,对比的元件名在元件加上属性eqaulName
gt 和另一元件对比值是否大于另一元件值,对比的元件名在元件加上属性eqaulName
isNumber 是否为数字
isInt 是否为整形
isTime 是否为时间格式
isDate 是否为日期格式
isEmail 必须是Email格式
isPhone 是否为电话号码
isMobile 是否为手机号码
isIdCard 是否为身份证号码
isMoney 是否为货币值
isZip 是否是邮件编码
isQQ 是否是QQ
isEnglish 是否是english
isChinese 是否是中文
isUrl 是否是url
compare 对比两个值
limit 长度限制
range 值范围限制
requireChecked 单选、复选框必须选择
filter 扩展名限制
isNo 值不等于
regexp 自定义正则判断
custom 自定义函数判断

更新历史：
0.3
加入十几种验证规则
加入自定义正则判断
加入自定义函数判断
加入将焦点移到第一个错误元件
0.2
加入自定义错误显示方式
http://coderhome.net/demo/FormValid/

...全文

245 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

天才在左疯子在右 2008-11-29

打赏
举报

很简单啊不过你的要求太多了我还没有时间做完
先给你个例子
<html>
<title></title>
<script language="javascript">
function datatime()
{
year=document.form1.DT.value.substring(0,4)
date=new Date();
document.form1.age.value=date.getFullYear()-year
}

function closewindow()
{
window.close();
}
function a()
{
var f=document.form1;
if (f.TN.value==""||f.TN.value.length<6||f.TN.value.length>15)
{
alert("请输入正确的用户名！");
f.TN.value=""
f.TN.focus();
return false;
}
if(f.MM.value==""||f.MM.value.length<4||f.MM.value.length>15)
{
alert("请输入密码，你的密码有误！");
f.MM.value="";
f.MM.focus();
return false;
}
if(f.MM1.value==""||f.MM1.value!=f.MM.value)
{
alert("请确认您的密码，您的确认码有误！");
f.MM1.value="";
f.MM1.focus();
return false;
}
if(f.sex[0].checked==false&&f.sex[1].checked==false)
{
alert("请选择性别！");
f.sex[0].focus();
return false;
}
if(f.DT.value=="")
{
alert("请输入您的出生年月！");
f.DT.focus();
return false;
}

if (f.Tel.value==""||f.Tel.value.length!=11||isNaN(f.Tel.value))

{
alert("请输入您的电话号码！");
f.Tel.value="";
f.Tel.focus();
return false;
}
var a1=f.EM .value.indexOf("@",0);
var a2=f.EM .value.indexOf(".",0);
if (f.EM.value==""||(a1==-1||a2==-1)||a1>a2)
{
alert("请输入您的E-mail地址!");
f.EM.value="";
f.EM.focus();
return false;
}
if (f.Q.value==""||f.Q.value.length!=6||isNaN(f.Q.value))

{
alert("请输入您的邮编！");
f.Q.value="";
f.Q.focus();
return false;
}
if (f.Box[0].checked==false&&f.Box[1].checked==false&&f.Box[2].checked==false&&f.Box[3].checked==false)
{
alert("请选择至少一项爱好！");
f.Box[0].focus();
return false;

}
var xb="";
if(f.sex[0].checked==true)
{
xb=f.sex[0].value;
}
if(f.sex[1].checked==true)
{
xb=f.sex[1].value;
}
var ah="";
for(var i=0;i<f.Box.value.length;i++)
{
if (f.Box[i].checked==true)
{
ah+=f.Box[i].value+" ";
}
}

var w=window.open("a.html");
w.document.write("<table border=1><tr><td>");
w.document.write("<h1 align=center>您注册的信息如下：</h1>");
w.document.write("</td></tr></table>")
w.document.write("<p>您的用户名是:"+f.TN.value);
w.document.write("<p>您的密码是:"+f.MM.value);
w.document.write("<p>您的性别是"+xb);
;
w.document.write("<p>您的年龄是:"+f.age.value);
w.document.write("<p>您的电话号码是:"+f.Tel.value);
w.document.write("<p>您的Email是:"+f.EM.value);
w.document.write("<p>您的邮编是:"+f.Q.value);
w.document.write("<p>您的爱好是:"+ah);

w.document.write("<p align=center><a href='表单.html'>返回首页</a>");

}

</script>
<style type="text/css">

</style>
<body onLoad="document.form1.TN.focus()">
<form name="form1" onSubmit="return a()">
<table width="407" border="1" align="center">
<tr>
<td colspan="3"> <div align="center" class="STYLE1">
<h1>表单提交</h1>
</div></td>
</tr>
<tr>
<td width="55">用户名： </td>
<td width="168"><input name="TN" type="text" ></td>
<td width="162"><div align="center" class="STYLE3">长度6~15个字符</div></td>
</tr>
<tr>
<td>密码：</td>
<td><input name="MM" type="password" ></td>
<td><div align="center" class="STYLE3">长度为4~15个字符</div></td>
</tr>
<tr>
<td><div align="left">确认密码：</div></td>
<td><input name="MM1" type="password" ></td>
<td><div align="center" class="STYLE3">进行密码确认</div></td>
</tr>
<tr>
<td>性别：</td>
<td>　　
<input type="radio" name="sex" value=" 男">
男 <input type="radio" name="sex" value="女">
女</td>
<td><div align="center" class="STYLE3">选择一项</div></td>
</tr>
<tr>
<td>出生年月：</td>
<td><input name="DT" type="text" ></td>
<td><div align="center" class="STYLE3">输入格式：1985-01</div></td>
</tr>
<tr>
<td>年龄：</td>
<td><input name="age" type="text" ></td>
<td><div align="center" class="STYLE3">无需输入，自动显示</div></td>
</tr>
<tr>
<td>电话号码：</td>
<td><input name="Tel" type="text" ></td>
<td><div align="center" class="STYLE3">长度为11</div></td>
</tr>
<tr>
<td>E_mail：</td>
<td><input name="EM" type="text" ></td>
<td><div align="center" class="STYLE3">E_mail必须有@和.(并且@在.之前)</div></td>
</tr>
<tr>
<td><div align="left">邮编：</div></td>
<td><input name="Q" type="text" ></td>
<td><div align="center" class="STYLE3">长度为6位，需为数字</div></td>
</tr>
<tr>
<td height="44"><strong>爱好</strong></td>
<td><input name="Box" type="checkbox" value=" 看书">
看书
<input name="Box" type="checkbox" value=" 骑马">
骑马　　
<input name="Box" type="checkbox" value="射箭">
射箭
<input name="Box" type="checkbox" value="溜冰">
溜冰</td>
<td><div align="center" class="STYLE3">请至少选择一项</div></td>
</tr>
<tr>
<td>个人简介</td>
<td><textarea name="textarea" cols="２０" rows="５"></textarea></td>
<td><div align="center" class="STYLE3">简单介绍自己</div></td>
</tr>

<tr>
<td colspan="2">　　　　
<input type="submit" value="确定">
<input name="重置" type="reset" value="取消">
<input name="按钮" type="button" value="关闭" onClick="closewindow()"></td>
<td><div align="center"><span class="STYLE2"><span class="STYLE4"></span></span></div></td>
</tr>
</table>
</form>