下面是JS实现的简单表单验证功能完整实例的攻略。
标题
JS实现的简单表单验证功能完整实例
步骤说明
第一步：HTML部分
在HTML页面中，需要根据需求设置表单元素，包括表单元素的类型、属性以及相关样式。示例如下：
<!DOCTYPE html>
<html>
<head>
<title>表单验证</title>
<meta charset="utf-8">
</head>
<body>
<form id="myform" action="#" method="post">
<label>用户名：</label>
<input type="text" id="username" name="username"><br>
<label>密码：</label>
<input type="password" id="password" name="password"><br>
<label>确认密码：</label>
<input type="password" id="repassword"><br>
<input type="button" id="submitBtn" value="提交">
</form>
<script type="text/javascript" src="form.js"></script>
</body>
</html>
第二步：JavaScript部分
JavaScript代码部分是实现表单验证的核心部分。示例如下：
var btn = document.querySelector("#submitBtn"),
username = document.getElementById("username"),
password = document.getElementById("password"),
repassword = document.getElementById("repassword");
// 点击提交按钮进行表单验证
btn.onclick = function() {
if (username.value === "") {
alert("请输入用户名！");
return false;
}
if (password.value === "") {
alert("请输入密码！");
return false;
}
if (repassword.value === "") {
alert("请确认密码！");
return false;
}
if (password.value != repassword.value) {
alert("两次密码不一致，请重新输入！");
return false;
}
alert("提交成功！");
return true;
}
第三步：运行验证
在浏览器中打开HTML页面，输入各个表单元素的内容，如果验证通过，则会弹出“提交成功”的弹窗。如果有表单元素为空或两次密码输入不一致，则会弹出相应的提示框。当全部表单都通过验证后，系统就会提交表单内容。
示例说明：
示例1：
现在要求用户输入用户名和密码，但不要求确认密码。如果用户名或密码为空，需要弹出提示框。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>表单验证</title>
<meta charset="utf-8">
</head>
<body>
<form id="myform" action="#" method="post">
<label>用户名：</label>
<input type="text" id="username" name="username"><br>
<label>密码：</label>
<input type="password" id="password" name="password"><br>
<input type="button" id="submitBtn" value="提交">
</form>
<script type="text/javascript" src="form.js"></script>
</body>
</html>
var btn = document.querySelector("#submitBtn"),
username = document.getElementById("username"),
password = document.getElementById("password");
// 点击提交按钮进行表单验证
btn.onclick = function() {
if (username.value === "") {
alert("请输入用户名！");
return false;
}
if (password.value === "") {
alert("请输入密码！");
return false;
}
alert("提交成功！");
return true;
}
示例2：
现在要求用户输入用户名、密码和确认密码，并且验证两次密码输入是否一致。如果任意一个表单为空或两次密码输入不一致，则需要弹出相应的提示框。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>表单验证</title>
<meta charset="utf-8">
</head>
<body>
<form id="myform" action="#" method="post">
<label>用户名：</label>
<input type="text" id="username" name="username"><br>
<label>密码：</label>
<input type="password" id="password" name="password"><br>
<label>确认密码：</label>
<input type="password" id="repassword"><br>
<input type="button" id="submitBtn" value="提交">
</form>
<script type="text/javascript" src="form.js"></script>
</body>
</html>
var btn = document.querySelector("#submitBtn"),
username = document.getElementById("username"),
password = document.getElementById("password"),
repassword = document.getElementById("repassword");
// 点击提交按钮进行表单验证
btn.onclick = function() {
if (username.value === "") {
alert("请输入用户名！");
return false;
}
if (password.value === "") {
alert("请输入密码！");
return false;
}
if (repassword.value === "") {
alert("请确认密码！");
return false;
}
if (password.value != repassword.value) {
alert("两次密码不一致，请重新输入！");
return false;
}
alert("提交成功！");
return true;
}
结束语
以上就是JS实现的简单表单验证功能完整实例的攻略，希望对你有所帮助。如果有不清楚的地方，可以随时提出。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现的简单表单验证功能完整实例 - Python技术站
微信扫一扫 
支付宝扫一扫 