javascript验证表单格式-CSDN博客

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>显示图片验证Demo</title> <script type="text/javascript"> /*验证Email是否为空，和格式是否正确*/ function checkEmail() { var txtEmail=document.getElementById("txtEmail"); var divEmail=document.getElementById("divEmail"); var varMail= /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; if(txtEmail.value!="") { if (!varMail.test(txtEmail.value)) { divEmail.style.display="block"; } else { divEmail.style.display="none"; } } else { txtEmail.value ="Email不能为空"; } } /*验证电话号码格式xxxx-xxxxxxx*/ function checkPhone() { var txtPhone=document.getElementById("txtPhone"); var divPhone=document.getElementById("divPhone"); var varphone1=/(\d{3}-)(\d{8})$|(\d{4}-)(\d{7})$/; var varphone=/^(([0\+]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/; if(txtPhone.value!="") { if(!varphone.test(txtPhone.value)) { divPhone.style.display="block"; } else { divPhone.style.display="none"; } } else { txtPhone.value="电话不能为空"; } } /*验证11位（从13到19段）手机号码格式是否正确*/ function checkCell() { var txtCell=document.getElementById("txtCell"); var divCell=document.getElementById("divCell"); var varcell=/^1[3-9]\d{9}$/; if(txtCell.value!="") { if(!varcell.test(txtCell.value)) { divCell.style.display="block"; } else { divCell.style.display="none"; } } else { txtCell.value="手机号码不能为空"; } } /*最大字符设置*/ function checknumofwords() { var txtNumofwords=document.getElementById("txtNumofwords"); var divNumofwords=document.getElementById("divNumofwords"); if(txtNumofwords.value.length>5) { divNumofwords.style.display="block"; } else { divNumofwords.style.display="none"; } } /*时间格式*/ function checktime() { var txttime=document.getElementById("txttime"); var myDate=new Date(); var mytime=myDate.toLocaleString(); txttime.value=mytime; } </script> </head> <body> <div>验证Email格式：</div> <div><input name="txtEmail" type="text" οnblur="checkEmail()" /></div> <div id="divEmail" style="display:none" ><img src="image/wrong.png" width="15" height="15" /> </div> <div>验证电话号码格式：</div> <div><input name="txtPhone" type="text" οnblur="checkPhone()" /></div> <div id="divPhone" style="display:none" ><img src="image/wrong.png" width="15" height="15" /> </div> <div>验证手机号码格式：</div> <div><input name="txtCell" type="text" οnblur="checkCell()" /></div> <div id="divCell" style="display:none" ><img src="image/wrong.png" width="15" height="15" /> </div> <div>验证输入最大字符：</div> <div><input name="txtNumofwords" type="text" οnblur="checknumofwords()" /></div> <div id="divNumofwords" style="display:none" ><img src="image/wrong.png" width="15" height="15" /> </div> <div>按照一定的日期格式获得日期和时间：</div> <div><input name="txttime" type="text" οnclick="checktime()" /></div> </body> </html>

效果图：

1）验证为空