当前位置：Gxlcms > AJAX > Ajax带提示的验证表单实例

Ajax带提示的验证表单实例

时间：2021-07-01 10:21:17 帮助过：30人阅读

本文实例讲述了Ajax带提示的验证表单。分享给大家供大家参考。具体如下：

这是一个常用的Ajax表单验证程序，实时提示你输入的字符是否符合要求，简洁明快，便于修改，这是用JavaScript实现的，没有掺杂其它的框架类代码，因此比较实用。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-ajax-table-check-codes/

具体代码如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <title>带提示的Ajax验证表单</title>
  7. <style type="text/css">
  8. form {
  9.   width:500px;
  10.   border:1px solid #ccc;
  11. }
  12. fieldset {
  13.   border:0;
  14.   padding:10px;
  15.   margin:10px;
  16.   position:relative;
  17. }
  18. label {
  19.   display:block;
  20.   font:normal 12px/17px verdana;
  21. }
  22. input {width:160px;}
  23. span.hint {
  24.   font:normal 11px/14px verdana;
  25.   background:#eee url(images/bg-span-hint-gray.gif) no-repeat top left;
  26.   color:#444;
  27.   border:1px solid #888;
  28.   padding:5px 5px 5px 40px;
  29.   width:250px;
  30.   position:absolute;
  31.   margin: -12px 0 0 14px;
  32.   display:none;
  33. }
  34. fieldset.welldone span.hint {
  35.   background:#9fd680 url(images/bg-span-hint-welldone.jpg) no-repeat top left;
  36.   border-color:#749e5c;
  37.   color:#000;
  38. }
  39. fieldset.kindagood span.hint {
  40.   background:#ffffcc url(images/bg-span-hint-kindagood.jpg) no-repeat top left;
  41.   border-color:#cc9933;
  42. }
  43. fieldset.welldone {
  44.   background:transparent url(images/bg-fieldset-welldone.gif) no-repeat 194px 19px;
  45. }
  46. fieldset.kindagood {
  47.   background:transparent url(images/bg-fieldset-kindagood.gif) no-repeat 194px 19px;
  48. }
  49. </style>
  50. <script type="text/javascript">
  51. function checkUsernameForLength(whatYouTyped) {
  52.   var fieldset = whatYouTyped.parentNode;
  53.   var txt = whatYouTyped.value;
  54.   if (txt.length > 5) {
  55.     fieldset.className = "welldone";
  56.   }
  57.   else {
  58.     fieldset.className = "";
  59.   }
  60. }
  61. function checkPassword(whatYouTyped) {
  62.   var fieldset = whatYouTyped.parentNode;
  63.   var txt = whatYouTyped.value;
  64.   if (txt.length > 3 && txt.length < 8) {
  65.     fieldset.className = "kindagood";
  66.   } else if (txt.length > 7) {
  67.     fieldset.className = "welldone";
  68.   } else {
  69.     fieldset.className = "";
  70.   }
  71. }
  72. function checkEmail(whatYouTyped) {
  73.   var fieldset = whatYouTyped.parentNode;
  74.   var txt = whatYouTyped.value;
  75.   if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(txt)) {
  76.     fieldset.className = "welldone";
  77.   } else {
  78.     fieldset.className = "";
  79.   }
  80. }
  81. function addLoadEvent(func) {
  82.  var oldonload = window.onload;
  83.  if (typeof window.onload != 'function') {
  84.   window.onload = func;
  85.  } else {
  86.   window.onload = function() {
  87.    oldonload();
  88.    func();
  89.   }
  90.  }
  91. }
  92. function prepareInputsForHints() {
  93.  var inputs = document.getElementsByTagName("input");
  94.  for (var i=0; i<inputs.length; i++){
  95.   inputs[i].onfocus = function () {
  96.    this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
  97.   }
  98.   inputs[i].onblur = function () {
  99.    this.parentNode.getElementsByTagName("span")[0].style.display = "none";
  100.   }
  101.  }
  102. }
  103. addLoadEvent(prepareInputsForHints);
  104. </script>
  105. </head>
  106. <body>
  107. <form
  108.   action="#"
  109.   name="basicform"
  110.   id="basicform" >
  111. <fieldset>
  112.   <label for="username">用户名:</label>
  113.   <input
  114.     type="text"
  115.     id="username"
  116.     onkeyup="checkUsernameForLength(this);" />
  117.   <span class="hint">用户名最低6位哦</span>
  118. </fieldset>
  119. <fieldset>
  120.   <label for="password">密码:</label>
  121.   <input
  122.     type="password"
  123.     id="password"
  124.     onkeyup="checkPassword(this);" />
  125.   <span class="hint">密码需要4到8位哦</span>
  126. </fieldset>
  127. <fieldset>
  128.   <label for="email">Email地址:</label>
  129.   <input
  130.     type="text"
  131.     id="email"
  132.     onkeyup="checkEmail(this);" />
  133.   <span class="hint">You can enter your real address without worry - we don't spam!</span>
  134. </fieldset>
  135. </form>
  136. </body>
  137. </html>

希望本文所述对大家的javascript程序设计有所帮助。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！