Ajax带提示的验证表单实例

技术  /  管理员 发布于 8年前   188

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

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

运行效果截图如下：

在线演示地址如下：

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

具体代码如下：

<!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>带提示的Ajax验证表单</title><style type="text/css">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;}</style><script type="text/javascript">function checkUsernameForLength(whatYouTyped) {  var fieldset = whatYouTyped.parentNode;  var txt = whatYouTyped.value;  if (txt.length > 5) {    fieldset.className = "welldone";  }  else {    fieldset.className = "";  }}function checkPassword(whatYouTyped) {  var fieldset = whatYouTyped.parentNode;  var txt = whatYouTyped.value;  if (txt.length > 3 && txt.length < 8) {    fieldset.className = "kindagood";  } else if (txt.length > 7) {    fieldset.className = "welldone";  } else {    fieldset.className = "";  }}function checkEmail(whatYouTyped) {  var fieldset = whatYouTyped.parentNode;  var txt = whatYouTyped.value;  if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(txt)) {    fieldset.className = "welldone";  } else {    fieldset.className = "";  }}function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') {  window.onload = func; } else {  window.onload = function() {   oldonload();   func();  } }}function prepareInputsForHints() { var inputs = document.getElementsByTagName("input"); for (var i=0; i<inputs.length; i++){  inputs[i].onfocus = function () {   this.parentNode.getElementsByTagName("span")[0].style.display = "inline";  }  inputs[i].onblur = function () {   this.parentNode.getElementsByTagName("span")[0].style.display = "none";  } }}addLoadEvent(prepareInputsForHints);</script></head><body><form  action="#"  name="basicform"  id="basicform" ><fieldset>  <label for="username">用户名:</label>  <input    type="text"    id="username"    onkeyup="checkUsernameForLength(this);" />  <span class="hint">用户名最低6位哦</span></fieldset><fieldset>  <label for="password">密码:</label>  <input    type="password"    id="password"    onkeyup="checkPassword(this);" />  <span class="hint">密码需要4到8位哦</span></fieldset><fieldset>  <label for="email">Email地址:</label>  <input    type="text"    id="email"    onkeyup="checkEmail(this);" />  <span class="hint">You can enter your real address without worry - we don't spam!</span></fieldset></form></body></html>

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


  • 上一条：
    基于Ajax实现下拉框联动显示数据
    下一条：
    Ajax实现弹出式无刷新城市选择功能代码

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客