首页 > 代码库 > 1月28日 表单验证和正则表达式
1月28日 表单验证和正则表达式
表单验证：
一、非空验证：
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;}}
五、其它验证：
案例一、邮箱验证：
<body><form action="" method="get"><table width="100%" border="1"> <tr> <td width="20%" height="40" align="right">用户名:</td> <td width="50%"> <input type="text" name="uid" id="uid" value=http://www.mamicode.com/"必填" style="color:#666" /></td> <td width="30%"> </td> </tr> <tr> <td height="40" align="right">密码：</td> <td> <input type="text" name="uid2" id="idpd1" /></td> <td> </td> </tr> <tr> <td height="40" align="right">确认密码：</td> <td> <input type="text" name="uid3" id="idpd2" /></td> <td> </td> </tr> <tr> <td height="40" align="right">邮箱：</td> <td> <input type="text" name="uid4" id="idemile" /></td> <td> </td> </tr></table><input type="submit" value=http://www.mamicode.com/"提交" onclick="return pp1()" /></form><script language="javascript">function onui(){ var ui1=document.getElementById("uid").value; if(ui1=="必填" || ui1.length=="0") { return "用户名不能为空\n"; } else { return ""; } }function onpd(){ var error2=""; var pd1=document.getElementById("idpd1").value; if(pd1.length=="0") { error2+="密码不能为空\n"; } var pd2=document.getElementById("idpd2").value; if(pd2.length=="0") { error2+="确定密码不能为空\n"; } if(pd1!=pd2) { error2+="两次密码输入不一致\n"; } return error2;}function onemile(){ var error3=""; var emile1=document.getElementById("idemile"); if(emile1.value.length=="0") { error3+="邮箱不能为空\n"; } else { var reg=/^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/; if(emile1.value.match(reg)==null) { error3+="邮箱格式不正确\n"; } } return error3;}function pp1(){ var allerror=""; allerror+=onui(); allerror+=onpd(); allerror+=onemile(); if(allerror.length==0) { return true; } else { alert(allerror); return false; }}</script></body>
案例二、微博输入140字，键盘或复制粘贴，输一个少一个。
<body><form action="" method="get"><textarea name="aaa" cols="20px" id="aaa" rows="10" onm ousedown="pp1()" onkeyup="pp1()"></textarea><div id="bbb">还可以输入140个字</div></form><script language="javascript">function pp1(){ var a1=document.getElementById("aaa").value; var a2=document.getElementById("bbb"); var s=a1.length; if(140-s>=0) { a2.innerHTML="还可以输入"+(140-s)+"个字"; window.setTimeout("pp1()",50); } else { a2.innerHTML="你输入的字以超出140字"; }}</script></body>
效果图：
案例三、必填：
<body><form action="" method="get"><table width="100%" border="1"> <tr> <td width="20%" height="40" align="right">用户名:</td> <td width="50%"> <input type="text" name="uid" id="uid" value=http://www.mamicode.com/"必填" style="color:#999" onfocus="chuxian()" onblur="xiaoshi()" /></td> <td width="30%"> </td> </tr> <tr> <td height="40" align="right">密码：</td> <td> <input type="text" name="uid2" id="idpd1" /></td> <td> </td> </tr> <tr> <td height="40" align="right">确认密码：</td> <td> <input type="text" name="uid3" id="idpd2" /></td> <td> </td> </tr> <tr> <td height="40" align="right">邮箱：</td> <td> <input type="text" name="uid4" id="idemile" /></td> <td> </td> </tr></table></form><script language="javascript">var yanse=document.getElementById("uid").style.color;function chuxian(){ var a=document.getElementById("uid"); if(a.value=http://www.mamicode.com/="必填" && a.style.color==yanse) { a.value=""; a.style.color="black"; } }function xiaoshi(){ var a=document.getElementById("uid"); if(a.value=http://www.mamicode.com/="") { a.value="必填"; a.style.color="#999"; } }</script></body>
1月28日 表单验证和正则表达式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。