问题描述
我在使用JavaScript进行表单验证时遇到问题。 提交空白后，我想在表单中看到以下消息
通过使用以下html和javascript代码，但未显示，并且我无法处理问题所在。
<!-- javascript code --> <script type="text/javascript"> function validate(){ if(document.frm.username.value == ""){ document.getElementById("text").innerHTML = "Fill up the username."; document.frm.username.focus(); return false; } if(document.frm.password.value ==""){ document.getElementById("text").innerHTML = "Fill up the password."; document.frm.password.focus(); return false; } if(document.frm_validate.confirmPassword.value == ""){ document.getElementById("text").innerHTML = "Fill up the confirm password."; document.frm.confirmPassword.focus(); return false; } if(document.frm_validate.firstName.value == ""){ document.getElementById("text").innerHTML = "Fill up the first name."; document.frm.firstName.focus(); return false; } if(document.frm_validate.email.value == ""){ document.getElementById("text").innerHTML = "Fill up the email."; document.frm.email.focus(); return false; } return true; } </script>
<!-- form validation --> <form class="form-horizontal frm_validate" name="frm" action="#" onsubmit="validate()"> <fieldset> <legend>Form Validation</legend> <div class="form-group"> <label for="inputName" class="col-lg-3 control-label">Username<span class="star"> *</span></label> <div class="col-lg-9"> <input class="form-control" id="inputName" placeholder="Name" type="text" name="username"> <span id="text"></span> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-lg-3 control-label">Password<span class="star"> *</span></label> <div class="col-lg-9"> <input class="form-control" id="inputPassword" placeholder="....." type="text" name="password"> <span id="text"></span> </div> </div> <div class="form-group"> <label for="confirmPassword" class="col-lg-3 control-label">Confirm Password<span class="star"> *</span></label> <div class="col-lg-9"> <input class="form-control" id="confirmPassword" placeholder="....." type="text" name="confirmPassword"> <span id="text"></span> </div> </div> <div class="form-group"> <label for="firstName" class="col-lg-3 control-label">First Name<span class="star"> *</span></label> <div class="col-lg-9"> <input class="form-control" id="firstName" placeholder="First Name" type="text" name="firstName"> <span id="text"></span> </div> </div> <div class="form-group"> <label for="lastName" class="col-lg-3 control-label">Last Name</label> <div class="col-lg-9"> <input class="form-control" id="lastName" placeholder="Last Name" type="text"> </div> </div> <div class="form-group"> <label for="inputEmail" class="col-lg-3 control-label">Email<span class="star"> *</span></label> <div class="col-lg-9"> <input class="form-control" id="inputEmail" placeholder="Email" type="text" name="email"> <span id="text"></span> </div> </div> <div class="form-group"> <div class="col-lg-9 col-lg-offset-3"> <p><span class="star">* </span>Required field</p> </div> </div> <div class="form-group"> <div class="col-lg-9 col-lg-offset-3"> <button type="reset" class="btn btn-default">Cancel</button> <button type="submit" class="btn btn-primary">Submit</button> </div> </div>
1楼
RobG
1
2015-08-07 00:51:31
使用内联侦听器时，它实际上包装在一个函数中：
<form onsubmit="foo()" ...>
effectivley创建一个监听器，例如：
onsubmit = function () {
foo();
}
请注意，没有return语句，因此侦听器返回undefined 。 要使侦听器返回false并因此取消Submit事件，必须包含return语句，因此：
<form onsubmit="return foo()" ...>
变成：
onsubmit = function () {
return foo();
}
因此，现在侦听器返回函数返回的值。