表单的校验以及下拉选择器的简单使用

最新推荐文章于 2024-04-07 19:24:08 发布

夜说java

最新推荐文章于 2024-04-07 19:24:08 发布

阅读量574

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.csdn.net/ZPF1993X/article/details/52833479

web前端专栏收录该内容

7 篇文章

订阅专栏

本文档提供了一个HTML表单验证与用户交互的实例，包括用户名和密码的即时验证反馈，通过JavaScript实现。此外，还展示了如何使用下拉菜单进行选项选择并触发事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style type="text/css">
#table {
height: 100%;
overflow: auto;
}
</style>
<body>

<script type="text/javascript">
function checkuser() {
//获取文本框结点对象
var flag = false;
var userNode = document.getElementsByName("user")[0];
var username = userNode.value;
//alert(username);
var spannode = document.getElementById("userspan");

//创建一个正则表达式
var regex = new RegExp("^[a-zA-Z]{4}$");
//if (username == "zpf")
if (regex.test(username)) {

spannode.innerHTML = "输入正确";
flag = true;
} else {
spannode.innerHTML = "输入错误 ";
}
return flag;
}
function checkpass() {
var passnode = document.getElementsByName("pass")[0];
var pass = passnode.value;
var passspan = document.getElementById("passspan");
var passregex = new RegExp("^\\d{4}$");
//if (pass == "123")
if (passregex.test(pass)) {
passspan.innerHTML = "密码正确";
} else {
passspan.innerHTML = "密码错误";
}
}

/*
校验表单
*/
function checkFrom() {
if (checkuser()) {
return true;
}
return false;
}
/*
自定义提交表单
*/
function mybutn() {
var table = document.getElementById("table");
if (checkuser()) {
table.submit();
}
}

/*
校验表单
*/
function checkcountry() {
//alert(qwqw)；
var selectnode = document.getElementsByName("country")[0];
var opnodes = selectnode.options;
alert(opnodes[selectnode.selectedIndex].innerHTML);
}
</script>

<form id="table" onsubmit="return checkFrom()">

用户:<input type="text" name="user" onblur="checkuser()"> <span
id="userspan"></span> <br> 密码:<input type="text" name="pass"
onblur="checkpass()"> <span id="passspan"></span> <br> <input
type="submit" value="提交数据"> <br> <input type="submit"
onclick="mybutn()">
</form>
<select name="country" onchange="checkcountry()">
<option value="none">--请选择国家---</option>
<option value="cn">中国</option>
<option value="ua">美国</option>
<option value="us">日本</option>
</select>
<span id="slspan"></span>
<br>

</body>
</html>