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

xiaoxiao2021-02-28  131

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

转载请注明原文地址: https://www.6miu.com/read-22250.html

最新回复(0)