2025年4月30日大约 2 分钟
示例代码
<!doctype html>
<html>
<head>
<title>表单节点的获取</title>
<meta charset='utf-8'/>
<style type="text/css">
table,td{border-collapse:collapse;}
td{padding:10px;}
div{margin-top:40px;}
</style>
</head>
<body>
<center>
<div>
<form action="./1.php" method ='post' enctype="multipart/form-data" id='forms'>
<table border='1'>
<tr>
<td>用户名:</td>
<td>
<input type='text' name='username' id='uname' value=''/><span id='spa'>请输入8~16位的用户名</span>
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type='password' name='password'/>
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type='password' name='repassword' />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type='radio' name='sex' value='男' checked="checked"/>男
<input type='radio' name='sex' value='女' />女
</td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td>
<input type='checkbox' name='hobby[]' value='篮球' checked="checked"/>篮球
<input type='checkbox' name='hobby[]' value='足球' checked="checked"/>足球
<input type='checkbox' name='hobby[]' value='排球' />排球
<input type='checkbox' name='hobby[]' value='乒乓球' />乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<select name='city' id='sel'>
<option value='0'>北京</option>
<option value='1' selected="selected">天津</option>
<option value='2'>上海</option>
<option value='3'>重庆</option>
</select>
</td>
</tr>
<tr>
<td>个人介绍:</td>
<td>
<textarea name='intro' style='resize:none'>hello world</textarea>
</td>
</tr>
<tr>
<td>头像:</td>
<td>
<input type='file' name='profile' />
</td>
</tr>
<tr>
<td colspan='2' style='text-align:center'>
<input type='submit' value="提交" />
<input type='reset' value="重置"/>
<button>点击</button>
</td>
</tr>
</table>
</form>
</div>
</center>
<script type="text/javascript">
//获取元素
var uname = document.getElementById('uname');
var spa = document.getElementById('spa');
var sel = document.getElementById('sel');
var forms = document.getElementById('forms');
//获取焦点
uname.onfocus=function()
{
this.style.border="solid 2px blue";
}
//失去焦点
uname.onblur = function()
{
var uv=this.value;
//正则表达式
//var reg=/^\w{8,16}$/;
var reg = /^\w{8,16}$/;
//检测
if(!reg.test(uv))
{
this.style.border='solid 1px red';
spa.innerHTML="您的输入有误!";
spa.style.color='red';
}
else
{
this.style.border='solid 1px green';
spa.innerHTML="√";
spa.style.color='green';
}
}
//onchange
uname.onchange = function()
{
var uv=this.value;
this.value=uv.toUpperCase();
}
sel.onchange = function()
{
alert(this.value);
}
//onselect 只有input 和textarea生效
window.onselect = function()
{
alert('你被选中了');
}
//onsubmit
forms.onsubmit = function()
{
alert('12345');
/*这里判断的条件是填写的各项内容全部合格之后
if(){
return true;
}*/
return false;
}
//重置事件 onreset
forms.onreset = function()
{
alert('12345');
return false;
}
</script>
</body>
</html>