如何验证HTML的表单?
在HTML中创建表单是一件非常简单的事情,但在更多的情况下,我们需要对表单的内容做一个验证(这个验证推荐使用客户端验证,即在表单提交之前使用JavaScript验证输入的合法和有效性,虽然服务器端也可以做验证,但那样势必加大服务器的消耗并造成无谓的网络延迟,不推荐使用服务器端的形式)。下面我们来看一下如何使用HTML的表单验证。比如我们可以创建一个如下所示的表单:
<form method="post" action="http://www.baidu.com" id="register"> <label> <input type="text" name="pf_parents_name" id="pf_parents_name" /> </label> <label> <input type="text" name="pf_child_name" id="pf_child_name" /> </label> <label> <input type="submit" name="button" id="button" value="Submit" /> </label> </form>
注意其中的action属性定义了表单要提交的目标,而我们则可以指定给onsubmit一个方法,这个方法将根据验证的结果返回True或False,而表单的是否提交的动作也将被这个验证的结果所决定。
<form method="post" action="http://www.baidu.com" id="register" onsubmit="javascript:return formCheck()">
下面是一些常用的JavaScript验证方法:
<script type="text/javascript"> function formCheck() { var pn = document.getElementById("pf_parents_name"); var cn = document.getElementById("pf_child_name"); if(!notNull(pn.value) || !isChinese(pn.value)) { pn.focus(); return false; } if(!notNull(cn.value) || !isChinese(cn.value)) { cn.focus(); return false; } return true; } function notNull(s) { if(s!="" && s!=null) { return true; } else { return false; } } function isChinese(s) { for(var i=0;i<s.length;i++) { var charCode = s.charCodeAt(i); if(charCode < 255) { return false; } } return true; } function isTel(s) { var reg=/^([0-9]|[\-])+$/g ; if(s.length>18){ return false; } else{ return reg.test(s); } } function isEmail(t) { var reg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]+){1,2})+$/; return reg.test(t); } function isNumber(t) { var reg = /^([0-9])+$/g ; return reg.test(t); } </script>

.gif)
.gif)




.gif)
发表新评论