Question

我正在尝试完成一项让我这样做的家庭作业：

1）创建一个新的html表单。

物件：

电子邮件地址文本框（有效）

电话号码文本框（已禁用）

提交按钮（已禁用）

2）指导用户输入电子邮件地址。

验证电子邮件地址是否包含@和a。用户离开文本框时在电子邮件地址中。

成功

1) enable Phone Number Text Box
2) focus is given to the phone number text box

失败

1) use a warning message that the field value  is invalid and how to correctly enter the value.
2) focus returns to the email address text box.

当用户离开文本框时，验证电话号码是10位数但没有特殊字符。

成功

1) reformat the phone number to use dashes (e.g. 123-321-4545).
2) focus is given to the submit button 
3) enable the submit button

失败

1) use a warning message that the field value is invalid and how to correctly enter the value.
2) focus returns to the phone number text box.

“提交”按钮会响应所有字段验证的成功消息。

这是我到目前为止所拥有的。我只是想知道如果第一次运行成功，如何将焦点转移到电话号码或提交按钮

<!DOCTYPE html>
<html>
<header>
<script type="text/javascript">

function checkForm(form)
{
// validation fails if the input is blank
if(form.inputfield.value == "") {
alert("Error: Input is empty!");
form.inputfield.focus();
return false;
}

// regular expression to match only alphanumeric characters and spaces
var re = /^[\w ]+$/;

// validation fails if the input doesn't match our regular expression
if(!re.test(form.inputfield.value)) {
alert("Error: Input contains invalid characters!");
form.inputfield.focus();
return false;
}

// validation was successful
return true;
}
window.onload = function() {
document.getElementById("myText").focus();
};

</script>
</header>
<body>

<form action="/action_page.php">
E-mail:    <input type="email" name="email" id="myText" required 
placeholder="Enter a valid email address">
<label for="phonenum">Phone Number (format: xxx-xxx-xxxx):</label>
<input type="tel" placeholder="Enter a valid phone number" pattern="^\d{3}-
\d{3}-\d{4}$" disabled required>
<input type="submit" value="Submit" disabled>
</form>

</body>
</html>

（有人可以在白天之前帮助我吗？）

如何将焦点转移到html

0 个答案: