首页 > 代码库 > HTML表单验证
HTML表单验证
表单验证：
一、非空验证：
1、内容是不是空的。
判断值的长度是不是0。length属性。压缩空格的函数。
2、内容是不是改变了。
二、对比验证：
1、验证两个控件值的关系（相同，大小）
2、验证控件的值与某个固定值的关系。
三、范围验证：
四、格式验证：
正则表达式。regularexpression
function checkEmail()
{
var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var txt = document.getElementById("txtEmail").value;
if(txt.match(reg) == null)
{
alert("邮箱格式不正确");
return false;
}
else
{
return true;
}
}
五、其它验证：
例题 表单验证
<title>表单验证</title></head><body><form><table width="100%"> <tr> <td width="20%">用户名</td> <td width="30%"><input type="txt" id="userID"></td> <td> </td> </tr> <tr> <td>密码</td> <td><input type="txt" id="PWD1"></td> <td> </td> </tr> <tr> <td>验证密码</td> <td><input type="txt" id="PWD2"></td> <td> </td> </tr> <tr> <td >邮箱</td> <td><input type="txt" id="mail"></td> <td> </td> </tr> <tr> <td>工资</td> <td><input type="txt" id="prize"></td> <td> </td> </tr></table><input type="submit" value="提交" onclick="return check()" ></form></body></html><script language="javascript">var user=document.getElementById("userID");var pWD1=document.getElementById("PWD1");var pWD2=document.getElementById("PWD2");var mail=document.getElementById("mail");var prize=document.getElementById("prize");function checkUser(){ if (user.value.length==0) { return "用户名不能为空\n"; } else { return "";}}function checkPWD1(){ if (pWD1.value.length==0) { return "密码不能为空\n"; } else { return "";} }function checkPWD2(){ if (pWD2.value.length==0) { return "验证密码不能为空\n"; } else if(pWD1.value.length!=pWD2.value.length) { return "两次输入的密码不一致\n"; } else { return "";}}function checkmail(){ var flMail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; if (mail.value.length==0) { return "邮箱不能为空\n"; } else if(mail.value.match(flMail)== null) { return "邮箱格式不正确\n"; } else { return ""; }}function checkprize(){ if (prize.value.length==0) { return "工资不能为空\n"; } else { if(isNaN(prize.value)==false) { var PRI=parseInt(prize.value); if(PRI<0) { return "工资不正确"; } else { return ""; } } else { return "工资只能是数字"; } }}function check(){ var s=""; s+=checkUser(); s+=checkPWD1(); s+=checkPWD2(); s+=checkmail(); s+=checkprize(); if(s.length==0) { return true; } else { alert(s); return false; } }</script>
例题
<title>显示字符数目</title></head><body><form id="form1" name="form1" method="post" action=""> <label for="txt"></label> <textarea name="txt" id="txt" cols="45" rows="5" onkeyup="CNT()"></textarea><span id="NUM">字数150</span></form></body></html><script language="javascript">function CNT(){ var txt=document.getElementById("txt"); var num=txt.value.length; var NUM=document.getElementById("NUM"); NUM.innerHTML="字数"+(150-num); //加上递归调用，可以实现即使用鼠标复制粘贴，也可以统计数字 window.setTimeout("CNT()",500);}</script>
例题
<title>必填选项表单的制作</title></head><body><form> <table width="100%"> <tr> <td width="20%">用户名</td> <td width="30%" ><input style="color:#999999" type="txt" id="userID" / value="必填" onfocus="doFocus()" onblur="doBlur()"></td> <td> </td> </tr> <tr> <td>密码</td> <td><input type="txt" id="PWD1" /></td> <td> </td> </tr> <tr> <td>验证密码</td> <td><input type="txt" id="PWD2" /></td> <td> </td> </tr> <tr> <td >邮箱</td> <td><input type="txt" id="mail" /></td> <td> </td> </tr> <tr> <td>工资</td> <td><input type="txt" id="prize" /></td> <td> </td> </tr> </table> <input type="submit" value="提交" onclick="return check()" /></form></body></html><script language="javascript">var atTxt=document.getElementById("userID");c=atTxt.style.color;//c存储的是一个颜色，不能代表元素的属性function doFocus(){ if (atTxt.value=="必填"&&atTxt.style.color==c) { atTxt.value=""; atTxt.style.color="black"; } }function doBlur(){ if(atTxt.value.length==0) { atTxt.value="必填"; atTxt.style.color=c; } }</script>
HTML表单验证
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。