注册表单输入框检测

大多网站注册用户或登录时候,都有要求一些必选项一定要输入,还有格式长度啥的。

这里只写了简单的必选框的判断。 其他的在input的data自定义属性值上再添加就好了。

以下是html代码

<body>

<form>

<div id='div2' class="Absolute">

<label class='L MR20 MT20 Label1'>用户名</label>

<input id="username" class='L MR40 MT20 Text1 Inputs' type="text" name="userName"

data="{required:true,msg:{required:'用户名不能为空!'}}" />

<label style="color: red"></label>

<div class='ClearB'></div>

<label class='L MR20 MT30 Label1'>密码</label>

<input id="pwd" class='L MR40 MT30 Text1 Inputs' type="text" name="userPwd" data="{required:true,msg:{required:'密码不能为空!'}}" />

<label style="color: red"></label>

<button id="submit1" class="MT40">登录</button>

</div>

</form>

<script>

  var inputs = document.getElementsByClassName('Inputs');

var validate = function() {

for (var k = 0; k < inputs.length; k++) {

var data = inputs[k].getAttribute('data');

obj = eval('(' + data + ')');

if(obj&&obj.required&&inputs[k].value ==""){

inputs[k].nextSibling.innerHTML = obj.msg.required;

return false;

continue;

  }

  inputs[k].nextSibling.innerHTML = '';

  }

  return true;

}

   //每个输入框都加上失去焦点的监听,触发时,从上往下检测输入是否ok

  //假如第2个不ok就第2个后面显示提示  //不继续检测第三个了具体的看validate()函数里

for(var i =0;i<inputs.length;i++){

  inputs[i].onblur = validate;

}

  //点击提交时 所有按钮再查一遍是否格式ok  

  //假如:第2个不ok就提示同时在form的onsubmit中returnfalse就不会执行它的默认方法。

  //假如:检测第一个form中的所有输入框都ok 就不return false

document.forms[0].onsubmit=function(){

  if(!validate())

  return false;

}

</script>

</body>

注释有点绕啊。哪句看不懂的请留言。我再修正。非常感谢。

原文地址:https://www.cnblogs.com/sweetXiaoma/p/5862904.html