Javascript 我需要帮助制作状态栏标签
我需要制作一个带标签的按钮，检查上面所有的框，然后通过在按钮后的屏幕上显示状态来报告它们是否有效，而不弹出警报，我正在用JavaScript执行此操作，因此任何帮助都将不胜感激 以下是我到目前为止的情况：Javascript 我需要帮助制作状态栏标签,javascript,status,labels,Javascript,Status,Labels,我需要制作一个带标签的按钮，检查上面所有的框，然后通过在按钮后的屏幕上显示状态来报告它们是否有效，而不弹出警报，我正在用JavaScript执行此操作，因此任何帮助都将不胜感激 以下是我到目前为止的情况： <!DOCTYPE html> <html> <head> <script> function myFunction(x){ x.style.back
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x){
x.style.background="yellow";
}
function validateForm(){
var Fid=document.getElementById("firstName").value;
if (Fid.length < 3) {
alert("first id is not valid");
return;
}
var Lid=document.getElementById("lastName").value;
if (Lid.length < 3) {
alert("Last id is not valid");
return;
}
var Age=document.getElementById("age").value;
if (Age.length == 0) {
alert("Age is not valid");
return;
}
} //End validateForm()
<script language="javascript">
function checkEmail() {
var email = document.getElementById("email");
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email.value)) {
alert("Please provide a valid email address");
email.focus;
return false;
}
}
</script>
</script>
</head>
<body>
First id: <input type="text" id="firstName" onFocus="myFunction(this)"><br>
Last id: <input type="text" id="lastName" onFocus="myFunction(this)"><br>
Age: <input type="text" id="age" onFocus="myFunction(this)"><br>
E-mail address: <input type="text" id="email" onFocus="myFunction(this)"><br>
<label id="status">status</label><br>
<button id="CheckButton" onClick="return validateForm();">Check Form</button>
</body>
</html>
函数myFunction（x）{
x、 style.background=“黄色”；
}
函数validateForm（）{
var Fid=document.getElementById（“firstName”）.value；
如果（Fid.长度<3）{
警报（“第一个id无效”）；
返回；
}
var Lid=document.getElementById（“lastName”）.value；
如果（盖子长度<3）{
警报（“最后一个id无效”）；
返回；
}
var Age=document.getElementById（“Age”）.value；
if（Age.length==0）{
警告（“年龄无效”）；
返回；
}
}//End validateForm（）
函数checkEmail（）{
var email=document.getElementById（“电子邮件”）；
变量过滤器=/^（[a-zA-Z0-9\.\-]）+\@（[a-zA-Z0-9\-]）+\）+（[a-zA-Z0-9]{2,4}）+$/；
如果（！filter.test（email.value））{
警报（“请提供有效的电子邮件地址”）；
email.focus；
返回false；
}
}
第一个id:
最后一个id:
年龄：
电子邮件地址：
状态
检查表
innerHTMLvar Fid=document.getElementById("firstName").value;
if (Fid.length < 3) {
var status = document.getElementById('status');
status.innerHTML = status.innerHTML + '<br>First id is not valid';
//alert("first id is not valid");
return;
}
var Fid=document.getElementById（“firstName”）.value；
如果（Fid.长度<3）{
var status=document.getElementById（'status'）；
status.innerHTML=status.innerHTML+“
第一个id无效”；
//警报（“第一个id无效”）；
返回；
}
First id: <input type="text" id="firstName" onFocus="myFunction(this)"><br>
Last id: <input type="text" id="lastName" onFocus="myFunction(this)"><br>
Age: <input type="text" id="age" onFocus="myFunction(this)"><br>
E-mail address: <input type="text" id="email" onFocus="myFunction(this)"><br>
<span id="status">status</span><br>
<div id='firstNameDiv' style='display: none'>First id is not valid</div>
<div id='lastNameDiv' style='display: none'>Last is id not valid</div>
<div id='ageDiv' style='display: none'>Age is not valid</div>
<div id='emailDiv' style='display: none'>Email is not valid</div>
<button id="CheckButton" onClick="return validateForm();">Check Form</button>
第一个id:
最后一个id:
年龄：
电子邮件地址：
状态
第一个id无效
最后一个id无效
年龄无效
电子邮件无效
检查表
var Fid=document.getElementById("firstName").value;
if (Fid.length < 3) {
document.getElementById('firstNameDiv').style.display = "";
}
else {
document.getElementById('firstNameDiv').style.display = 'none';
}
var Fid=document.getElementById（“firstName”）.value；
如果（Fid.长度<3）{
document.getElementById（'firstNameDiv'）.style.display=“”；
}
否则{
document.getElementById（'firstNameDiv'）。style.display='none'；
}