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

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.代码

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值