大多网站注册用户或登录时候，都有要求一些必选项一定要输入，还有格式长度啥的。
这里只写了简单的必选框的判断。 其他的在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].οnsubmit=function(){
if(!validate())
return false;
}
</script>
</body>
注释有点绕啊。哪句看不懂的请留言。我再修正。非常感谢。
扫一扫
280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
