我是初学者,我编写了一个用于验证表单的代码:
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
alert("First name must be filled out");
return false;
}}
<!-- html part-->
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form><br>
此代码的问题是按下提交按钮会触发validateForm
功能。当对象丢失焦点时如何调用函数?
答案 0 :(得分:2)
这是我问题的确切解决方案。当对象失去焦点时,用户获得某种通知:
<script>
function validate(){
var y = document.getElementById("errorResponse");
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
y.innerHTML = "Error";
}
}
</script>
HTML表单是:
<form name="myForm">
First name: <input type="text" name="fname" onBlur = "validate()">
<div id = "errorResponse"></div>
<input type="submit" value="Submit">
</form>
div可以用CSS设计为红色以吸引用户注意,还可以播放更多技巧。
答案 1 :(得分:1)
按照
替换输入元素的代码<input type="text" onblur="return validateForm();" name="fname">
我想那就是你要找的东西
答案 2 :(得分:0)
<html>
<head>
<script type="text/javascript">
function validateForm(oForm){
var els = oForm.elements;
for(var i = 0; i < els.length; i++){
if('string' === typeof(els[i].getAttribute('data-message'))){
return valEl(els[i]);
}
}
}
function valEl(el){
var method = el.getAttribute('data-valMethod');
if('req' === method && (el.value === null || el.value === '')){
alert(el.getAttribute('data-message'));
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="#" onsubmit="return validateForm(this)" method="post">
First name:
<input data-message="First name must be filled out" data-valMethod="req" onchange="return valEl(this)"; name="fname"><br />
<input type="submit" value="Submit">
</form>
</body>
</html>
我在一个函数中拆分它可以验证“onchange”上的元素,另一个函数可以激活form.onsubmit()上每个元素的验证,如果表单元素上有所需的data-message属性。登记/>
从HTML5开始,Data- *属性对于这些东西非常方便:-)
这样您就可以避免必须在验证脚本中存储表单和元素的名称,因为您将引用传递给元素。这总是一件好事。
从这里您可以扩展valEl功能以适应其他类型的验证。
到目前为止,唯一的限制是每个元素只能有一种类型的验证,但这应该很容易到处。
快乐的编码。 / G