一、首先带大家了解一下什么是表单验证:
1、表单验证:获取表单标签的值,对比该值是否为空或者是否和你设定的值的标准相符(比如:输入的长度,字符的限制,格式的限制,英中文等等);如果对比有误则用弹框来对用户进行提示;并且阻止表单提交或者进入下一个界面,如果表单验证成功就提交。
2、表单验证的基本流程:在登录页面提交信息,可以用正则表达式来进行过滤,提交到后端数据库验证,然后返回信息到其他或者原页面。
二、新闻项目登录页面的基本样式
1、注意:验证码的span标签存在点击事件,只要点击yz()函数就会重新运行,验证码刷新一次
body部分代码:
body部分效果:
三、 表单验证代码:
1、首先function函数随机出4个0-字符串长度之间的数字下标
2、然后fou循环每找到一个下标所对应的数字或字母就把他拼接起来;
3、$()函数取得id值;
4、表单验证用户名和密码是否为空,还有取得验证码的文本框值验证是否与随机的字母数字是否一样
5、表单验证失败会有alert弹框;并且在验证码错误的情况下会自动清除且重新生成验证码,
四、总结归纳:
1、实现验证码不区分大小写
2、运用到的事件:onload:加载事件;onclick:点击事件;onsubmit:表单提交事件
3、ps:未连接数据库版本