39,084
社区成员
发帖
与我相关
我的任务
分享web应用JavaCript表单校验
<html>
<head>
<title>用户注册</title>
<script type="text/javascript">
function lengthtest()
{
if(document.yonghu.value.length==0)
{
alert("用户名不能为空！");
document.yonghu.focus();
return false;
}
if(document.yonghu.value.length<6)
{
alert("用户名不能少于6位！");
document.yonghu.focus();
return false;
}
if(document.mima.value.length<8)
{
alert("密码不能少于8位！");
document.mima.focus();
return false;
}
}
function panduan() //密码是否一致
{
}
</script>
<link rel=stylesheet href="Example3.css" type="text/css">
</head>
<body>
<FORM ACTION="http://reg_check.jsp" METHOD="POST">
<table border=1 align=center>
<tr>
<td colspan=2 align=center>用户注册信息</td>
</tr>
<tr>
<td>用户名</th>
<td><p><INPUT TYPE="TEXT" NAME="yonghu" SIZE="16" MAXLENGTH="16" class=text></p></td>
</tr>
<tr>
<td>密码</td>
<td><p><INPUT TYPE="PASSWORD" NAME="mima" SIZE="16" MAXLENGTH="16" class=text></p></td>
</tr>
<tr>
<td>校验密码</td>
<td><p><INPUT TYPE="PASSWORD" NAME="jiaoyan" SIZE="16" MAXLENGTH="16" class=text></p></td>
</tr>
<tr>
<td>籍贯</td>
<td><SELECT NAME="EXCHANGE" >
<OPTION value="浙江">1)浙江</OPTION>
<OPTION value="其他">2)其他</OPTION>
</SELECT></td>
</tr>
<tr>
<td>兴趣爱好</td>
<td><P><INPUT TYPE="CHECKBOX" NAME="investmentType" VALUE="CheckBox-0">篮球
<INPUT TYPE="CHECKBOX" NAME="investmentType" VALUE="CheckBox-1">足球
<INPUT TYPE="CHECKBOX" NAME="investmentType" VALUE="CheckBox-2">书法
<INPUT TYPE="CHECKBOX" NAME="investmentType" VALUE="CheckBox-0">音乐<BR>
<INPUT TYPE="CHECKBOX" NAME="investmentType" VALUE="CheckBox-1">绘画
<INPUT TYPE="CHECKBOX" NAME="investmentType" VALUE="CheckBox-2">散打
<INPUT TYPE="CHECKBOX" NAME="investmentType" VALUE="CheckBox-1">瑜伽
<INPUT TYPE="CHECKBOX" NAME="investmentType" VALUE="CheckBox-2">其他</p></td>
</tr>
<tr>
<td>政治面貌</td>
<td><p><INPUT TYPE="RADIO" NAME="level" VALUE="Radio-0">党员
<INPUT TYPE="RADIO" NAME="level" VALUE="Radio-1">团员
<INPUT TYPE="RADIO" NAME="level" VALUE="Radio-2">群众</p></td>
</tr>
<tr>
<td colspan=2 align=center><p>
<INPUT TYPE="SUBMIT" NAME="submit1" VALUE="提交" onclick="javascript:lengthtest();">
<INPUT TYPE="RESET" NAME="reset1" VALUE="重置"></p></td>
</tr>
<tr>
<td colspan=2 align=center><A HREF= "http://www.163.com" target="_blank">注册帮助信息请点击这里</A></td>
</tr>
</table>
</FORM>
</body>
</html>
Example3.css
.text{background:lightblue;color:red}
a:link {color: blue; text-decoration: none} /* 未访问的链接 */
a:visited {color:gray; text-decoration: none} /* 已访问的链接 */
a:hover {color: red; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: black; text-decoration: underline} /* 激活链接 */
怎么改啊，求指导
...全文
请发表友善的回复…
发表回复
wz_307 2014-03-09
- 打赏
- 举报
另外, 这种写法: document.yonghu 非常不好
添加id属性, 使用document.getElementById("yonghu")来做最标准
wz_307 2014-03-09
- 打赏
- 举报
只写了兴趣, 另外的仿照写吧..
<html>
<head>
<title>用户注册</title>
<script type="text/javascript">
function lengthtest()
{
showInterest();
if(document.yonghu.value.length==0)
{
alert("用户名不能为空！");
document.yonghu.focus();
return false;
}
if(document.yonghu.value.length<6)
{
alert("用户名不能少于6位！");
document.yonghu.focus();
return false;
}
if(document.mima.value.length<8)
{
alert("密码不能少于8位！");
document.mima.focus();
return false;
}
}
function panduan() //密码是否一致
{
}
// 翻译表
var translationTable = {
"CheckBox-0" : "篮球",
"CheckBox-1" : "足球",
"CheckBox-2" : "书法",
"CheckBox-3" : "音乐",
"CheckBox-4" : "绘画",
"CheckBox-5" : "散打",
"CheckBox-6" : "瑜伽",
"CheckBox-7" : "其他"
}
// 显示兴趣
function showInterest(){
var p = document.getElementById("interest"); // 给父结点一个ID标识
var i = 0;
var interests = [];
// 遍历子节点找到checkbox
while(i < p.childNodes.length){
var elem = p.childNodes[i];
if(elem.tagName == "INPUT"){
if(elem.checked)
interests.push(translationTable[elem.value]);
}
i++;
}
alert(interests.toString());
}
</script>
<link rel=stylesheet href="css.css" type="text/css">
</head>
<body>
<FORM ACTION="http://reg_check.jsp" METHOD="POST">
<table border=1 align=center>
<tr>
<td colspan=2 align=center>用户注册信息</td>
</tr>
<tr>
<td>用户名</th>
<td><p><INPUT TYPE="TEXT" NAME="yonghu" SIZE="16" MAXLENGTH="16" class=text></p></td>
</tr>
<tr>
<td>密码</td>
<td><p><INPUT TYPE="PASSWORD" NAME="mima" SIZE="16" MAXLENGTH="16" class=text></p></td>
</tr>
<tr>
<td>校验密码</td>
<td><p><INPUT TYPE="PASSWORD" NAME="jiaoyan" SIZE="16" MAXLENGTH="16" class=text></p></td>
</tr>
<tr>
<td>籍贯</td>
<td><SELECT NAME="EXCHANGE" >
<OPTION value="浙江">1)浙江</OPTION>
<OPTION value="其他">2)其他</OPTION>
</SELECT></td>
</tr>
<tr>
<td>兴趣爱好</td>
<td><P id="interest">
<INPUT TYPE="CHECKBOX" NAME="investmentType" VALUE="CheckBox-0">篮球
<INPUT TYPE="CHECKBOX" NAME="investmentType" VALUE="CheckBox-1">足球
<INPUT TYPE="CHECKBOX" NAME="investmentType" VALUE="CheckBox-2">书法
<INPUT TYPE="CHECKBOX" NAME="investmentType" VALUE="CheckBox-3">音乐
<BR>
<INPUT TYPE="CHECKBOX" NAME="investmentType" VALUE="CheckBox-4">绘画
<INPUT TYPE="CHECKBOX" NAME="investmentType" VALUE="CheckBox-5">散打
<INPUT TYPE="CHECKBOX" NAME="investmentType" VALUE="CheckBox-6">瑜伽
<INPUT TYPE="CHECKBOX" NAME="investmentType" VALUE="CheckBox-7">其他
</p></td>
</tr>
<tr>
<td>政治面貌</td>
<td><p>
<INPUT TYPE="RADIO" NAME="level" VALUE="Radio-0">党员
<INPUT TYPE="RADIO" NAME="level" VALUE="Radio-1">团员
<INPUT TYPE="RADIO" NAME="level" VALUE="Radio-2">群众
</p></td>
</tr>
<tr>
<td colspan=2 align=center><p>
<INPUT TYPE="Button" NAME="submit1" VALUE="提交" onclick="javascript:lengthtest();">
<INPUT TYPE="RESET" NAME="reset1" VALUE="重置"></p></td>
</tr>
<tr>
<td colspan=2 align=center><A HREF= "http://www.163.com" target="_blank">注册帮助信息请点击这里</A></td>
</tr>
</table>
</FORM>
</body>
</html>
