JavaScript教程-JavaScript 表单
表单简介
表单是 HTML 的基础。为了创建 JavaScript 表单，我们使用 HTML 表单元素。要创建一个表单，我们可以使用以下示例代码：
<html>
<head>
<title>登录表单</title>
</head>
<body>
<h3>登录</h3>
<form name="Login_form" onsubmit="submit_form()">
<h4>用户名</h4>
<input type="text" placeholder="输入您的电子邮件地址" />
<h4>密码</h4>
<input type="password" placeholder="输入您的密码" /><br/><br/>
<input type="submit" value="登录" />
<input type="button" value="注册" onClick="create()" />
</form>
<script type="text/javascript">
function submit_form() {
alert("登录成功");
}
function create() {
window.location = "signup.html";
}
</script>
</body>
</html>在这段代码中：
- 我们定义了一个名为 "Login_form" 的 HTML 表单，并指定了
onsubmit属性，以在提交表单时调用submit_form()函数。 - 表单包含用户名和密码的输入字段。
- 提交按钮触发
submit_form()函数，该函数显示成功登录的警告。 - "注册" 按钮将重定向到 "signup.html" 页面。
接下来，让我们创建一个带有各种输入字段和验证的注册表单：
<html>
<head>
<title>注册页面</title>
</head>
<body align="center">
<h1>创建您的帐户</h1>
<table cellspacing="2" align="center" cellpadding="8" border="0">
<tr>
<td>姓名</td>
<td><input type="text" placeholder="输入您的姓名" id="n1" /></td>
</tr>
<tr>
<td>电子邮件</td>
<td><input type="text" placeholder="输入您的电子邮件地址" id="e1" /></td>
</tr>
<tr>
<td>设置密码</td>
<td><input type="password" placeholder="设置密码" id="p1" /></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" placeholder="确认密码" id="p2" /></td>
</tr>
<tr>
<td><input type="submit" value="创建" onClick="create_account()" /></td>
</tr>
</table>
<script type="text/javascript">
function create_account() {
var n = document.getElementById("n1").value;
var e = document.getElementById("e1").value;
var p = document.getElementById("p1").value;
var cp = document.getElementById("p2").value;
var letters = /^[A-Za-z]+$/;
var email_val = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (n === '' || e === '' || p === '' || cp === '') {
alert("正确填写每个细节");
} else if (!letters.test(n)) {
alert('姓名不正确，必须只包含字母');
} else if (!email_val.test(e)) {
alert('无效的电子邮件格式，请输入有效的电子邮件地址');
} else if (p !== cp) {
alert("密码不匹配");
} else if (p.length > 12) {
alert("密码最长为12个字符");
} else if (p.length < 6) {
alert("密码最短为6个字符");
} else {
alert("您的帐户已成功创建...正在重定向到 JavaTiku.cn");
window.location = "https://www.javatiku.cn/";
}
}
</script>
</body>
</html>以上代码的输出如下所示：
通过这种方式，我们可以创建带有适当验证的 JavaScript 表单。
