web——表单验证
来源:互联网 发布:管家婆软件费用 编辑:程序博客网 时间:2024/06/10 11:57
这里的表单验证,限制了用户名不能是tom/jack/lily;这些本来是应该在数据库中完成的,但由于我的知识有限,只能写个low的…..一言不合,上个图
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> p{ text-indent: 30px; } input{ outline: none; } .isNull{ border: 1px solid red; } </style> <script> var names = ["tom","jack","lily"]; function mySub(){ var k = 0; var name = document.forms['myForm']['name']; var pwd = document.forms['myForm']['pwd']; var hobbys = document.forms['myForm']['hobby']; var xl = document.forms['myForm']['xl']; if(name.value.trim() == ""){ name.className = "isNull"; } if(pwd.value.trim() == ""){ pwd.className = "isNull"; } for(var i = 0 ; i < hobbys.length ; i++){ if(hobbys[i].checked == true){ k++; } } if(k<1){ document.getElementById("isHobby").className = "isNull"; } if(xl.value == "请选择"){ xl.className = "isNull"; } return false; } //还原表单元素样式 function inputFocus(obj){ obj.className = ""; } //判断用户名是否重复 function isName(obj){ var b = true; for (var i=0 ; i<names.length ; i++) { var n = names[i]; if(n == obj.value){ document.getElementById("isCan").innerHTML = "用户名以被注册!"; obj.className = "isNull"; b = false; break; } } if(b){ //当用户名不重复时 document.getElementById("isCan").innerHTML = ""; } } //下拉框内容改变事件 function myChange(obj){ if(obj.value != "请选择"){ obj.className = ""; } } //复选框事件 function mySelect(){ document.getElementById("isHobby").className = ""; } </script> </head> <body> <h1>用户注册</h1> <hr /> <form name="myForm" action="a.html" method="get" onsubmit="return mySub()"> <p> 用户名:<input name="name" type="text" onfocus="inputFocus(this)" onblur="isName(this)" /> <span id="isCan" style="font-size: 14px;color: red;"></span> </p> <p> 密码:<input name="pwd" type="password" onfocus="inputFocus(this)" /> </p> <p> 性别: <input type="radio" name="sex" value="男" checked />男 <input type="radio" name="sex" value="女" />女 </p> <p id="isHobby"> 爱好: <input type="checkbox" name="hobby" value="篮球" onclick="mySelect()" />篮球 <input type="checkbox" name="hobby" value="足球" onclick="mySelect()" />足球 <input type="checkbox" name="hobby" value="乒乓球" onclick="mySelect()" />乒乓球 <input type="checkbox" name="hobby" value="羽毛球" onclick="mySelect()" />羽毛球 </p> <p> 学历: <select name="xl" onchange="myChange(this)"> <option>请选择</option> <option>中学</option> <option>大专</option> <option>本科</option> <option>研究生</option> </select> </p> <p> <input type="submit" /> </p> </form> </body></html>
阅读全文
1 0
- web——表单验证
- Web安全——前端JS表单验证过滤
- Web 表单验证 javascript
- WEB表单安全验证
- Web开发-表单验证
- web-表单验证
- SpringMVC—表单验证
- JS—表单验证
- jquery—表单验证
- js表单验证——邮件验证
- 身份验证——表单验证
- easyUI——表单验证
- checkValidity()——表单验证
- JavaScript——表单验证
- JS——表单验证
- 【Angular】——表单验证
- 表单验证 web.config配置
- web开发之表单验证
- ReactJS 监听页面滚动事件
- JavaScript基础—仿千牛登录界面
- 高二&高一&初三模拟赛22 总结
- JDK与JRE对比
- strcpy和memcpy的区别
- web——表单验证
- 网页换肤效果
- JavaScript基础—表单验证
- nodejs gzip 解压缩base64
- KafKa+Zookeeper+Flume部署脚本
- 指针函数与函数指针
- 百度登录框架
- JavaScript基础—表单验证2
- Unsupported major.minor version 51.0 错误解决方案