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

来源：互联网发布：python局域网嗅探编辑：程序博客网时间：2024/05/17 23:34

<!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>

0 0