您的位置：首页 > 其它

[第六季]3.一个表单验证的例子

2017-08-05 13:46 330 查看

4.复习笔记(这个就是课后习题以及课程所呈现的需求)

①首先建立表单,然后检查是否选择了爱好,再检查密码位数是否是8位以上,再检查两个密码是否一致,最后检查备注会否为空.

注:个人觉得备注为空是允许的,这里只是教我们编程的例子.

5.自测代码

2.课堂笔记

(1).首先按照要求进行表单设置,年龄,爱好,密码,备注,并设置备注行数为4行,列数为10列.
年龄:输入数字
爱好: 爬山 游泳 网球 乒乓球
至少选择一个
密码：输入两次，两次必须一致，且密码长度必须大于8
备注：用textarea

html代码

<body>
<form name="f1">
姓名:<input type="text" name="xm"><br />
年龄:<input type="text" name="n1"><br />
爱好:<input type="checkbox" name="ah">爬山<input type="checkbox" name="ah">游泳<input type="checkbox" name="ah">网球<input type="checkbox" name="ah">乒乓球<br />
密码<input type="password" name="mm"><br />
重复密码<input type="password" name="cfmm"><br />
备注:<textarea name="bz" rows="4" cols="10"></textarea>
<input type="button" value="提交"><br />
</form>
</body>

(2)接下来进行编程
首先判断爱好全不选是不行的,密码长度小于8是不行的,两次密码输入不一致
<body>
<form name="f1">
姓名:<input type="text" name="xm"><br />
年龄:<input type="text" name="n1"><br />
爱好:<input type="checkbox" name="ah">爬山<input type="checkbox" name="ah">游泳<input type="checkbox" name="ah">网球<input type="checkbox" name="ah">乒乓球<br />
密码<input type="password" name="mm"><br />
重复密码<input type="password" name="cfmm"><br />
备注:<textarea name="bz" rows="4" cols="10"></textarea><br />
<input type="button" value="提交" onClick="checkit();"><br />
</form>
</body>

//检查函数
function checkit()
{
//检查爱好有没有被选中
var flag=false;
for(var i=0;i<document.forms[0].ah.length;i++)
{
if(document.forms[0].ah[i].checked)
{
flag=true;
break;
}
}
if(!flag)//没有一个爱好被选中
{
alert("请至少选择一个爱好");
return;
}
//检查密码
if(document.forms[0].mm.value.length<8)
{
alert("密码长度必须在8位以上");
document.forms[0].mm.focus();//让密码框获取焦点.
return;
}
if(document.forms[0].mm.value!=document.forms[0].cfmm.value)
{
alter("两次密码输入不一致!");
document.forms[0].cfmm.focus();
cfmm;
}
}
(3)接下来同样的,检查备注是否为空
if(document.forms[0].bz.value=="")
{
alert("请输入备注!");
//有没有return无所谓
}

这个代码是直接加在检查密码不一致后面的.

3.课程效果图

1.代码

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航