如何验证HTML的表单?

riadevID: 

在HTML中创建表单是一件非常简单的事情,但在更多的情况下,我们需要对表单的内容做一个验证(这个验证推荐使用客户端验证,即在表单提交之前使用JavaScript验证输入的合法和有效性,虽然服务器端也可以做验证,但那样势必加大服务器的消耗并造成无谓的网络延迟,不推荐使用服务器端的形式)。下面我们来看一下如何使用HTML的表单验证。比如我们可以创建一个如下所示的表单:

  1. <form method="post" action="http://www.baidu.com" id="register">
  2. <label>
  3. <input type="text" name="pf_parents_name" id="pf_parents_name" />
  4. </label>
  5.  
  6. <label>
  7. <input type="text" name="pf_child_name" id="pf_child_name" />
  8. </label>
  9. <label>
  10. <input type="submit" name="button" id="button" value="Submit" />
  11. </label>
  12. </form>

注意其中的action属性定义了表单要提交的目标,而我们则可以指定给onsubmit一个方法,这个方法将根据验证的结果返回True或False,而表单的是否提交的动作也将被这个验证的结果所决定。

  1. <form method="post" action="http://www.baidu.com" id="register" onsubmit="javascript:return formCheck()">

下面是一些常用的JavaScript验证方法:

  1. <script type="text/javascript">
  2. function formCheck() {
  3. var pn = document.getElementById("pf_parents_name");
  4. var cn = document.getElementById("pf_child_name");
  5. if(!notNull(pn.value) || !isChinese(pn.value)) {
  6. pn.focus();
  7. return false;
  8. }
  9. if(!notNull(cn.value) || !isChinese(cn.value)) {
  10. cn.focus();
  11. return false;
  12. }
  13. return true;
  14. }
  15. function notNull(s) {
  16. if(s!="" && s!=null) {
  17. return true;
  18. } else {
  19. return false;
  20. }
  21. }
  22. function isChinese(s) {
  23. for(var i=0;i<s.length;i++) {
  24. var charCode = s.charCodeAt(i);
  25. if(charCode < 255) {
  26. return false;
  27. }
  28. }
  29. return true;
  30. }
  31. function isTel(s) {
  32. var reg=/^([0-9]|[\-])+$/g ;
  33. if(s.length>18){
  34. return false;
  35. } else{
  36. return reg.test(s);
  37. }
  38. }
  39. function isEmail(t) {
  40. var reg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]+){1,2})+$/;
  41. return reg.test(t);
  42. }
  43.  
  44. function isNumber(t) {
  45. var reg = /^([0-9])+$/g ;
  46. return reg.test(t);
  47. }
  48. </script>

您给予的分值: None 平均分: 9.7 ( 3 票)

发表新评论

  • 网页地址和电子邮件地址将会被自动转换为链接。
  • 行和段被自动切分。
  • 您可以使用下面的标签来高亮显示您的评论内容: <code>, <blockcode>. 可以使用"[foo]".旁边显示标签样式 "<foo>" PHP代码可以用这样的区块来包含<?php ... ?> or <% ... %>

更多格式化选项信息

验证区域
系统验证:请回答下面的问题