大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

Ajax怎么实现带提示的验证表单

这篇文章主要介绍“Ajax怎么实现带提示的验证表单”,在日常操作中,相信很多人在Ajax怎么实现带提示的验证表单问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Ajax怎么实现带提示的验证表单”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

创新互联专注于企业全网整合营销推广、网站重做改版、朝阳网站定制设计、自适应品牌网站建设、html5商城建设、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为朝阳等各大城市提供网站开发制作服务。

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

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

运行效果截图如下:

Ajax怎么实现带提示的验证表单

在线演示地址如下:

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

具体代码如下:





带提示的Ajax验证表单

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;
}


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


  用户名:      用户名最低6位哦
  密码:      密码需要4到8位哦
  Email地址:      You can enter your real address without worry - we don't spam!

到此,关于“Ajax怎么实现带提示的验证表单”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


网页标题:Ajax怎么实现带提示的验证表单
URL标题:http://dzwzjz.com/article/ipgssi.html
在线咨询
服务热线
服务热线:028-86922220
TOP