Ajax带提示的验证表单实例

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

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

运行效果截图如下：

在线演示地址如下：

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

具体代码如下：

form {
  width:500px;
  border:1px solid #ccc;
}
fieldset {
  border:0;
  padding:10px;
  margin:10px;
  position:relative;
}
label {
  display:block;
  font:normal 12px/17px verdana;
}
input {width:160px;}
span.hint {
  font:normal 11px/14px verdana;
  background:#eee url(images/bg-span-hint-gray.gif) no-repeat top left;
  color:#444;
  border:1px solid #888;
  padding:5px 5px 5px 40px;
  width:250px;
  position:absolute;
  margin: -12px 0 0 14px;
  display:none;
}
fieldset.welldone span.hint {
  background:#9fd680 url(images/bg-span-hint-welldone.jpg) no-repeat top left;
  border-color:#749e5c;
  color:#000;
}
fieldset.kindagood span.hint {
  background:#ffffcc url(images/bg-span-hint-kindagood.jpg) no-repeat top left;
  border-color:#cc9933;
}
fieldset.welldone {
  background:transparent url(images/bg-fieldset-welldone.gif) no-repeat 194px 19px;
}
fieldset.kindagood {
  background:transparent url(images/bg-fieldset-kindagood.gif) no-repeat 194px 19px;
}

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