简单表单验证实例
来源:互联网 发布:12306订票软件下载 编辑:程序博客网 时间:2024/06/05 11:24
<!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>
阅读全文
0 0
- 简单表单验证实例
- JQuery中一个简单的表单验证的实例
- extjs 表单验证实例
- extjs 表单验证实例
- extjs 表单验证实例
- extjs 表单验证实例
- struts2表单验证实例
- struts1 表单验证实例
- 表单验证实例
- JqueryMobile表单验证实例
- extjs 表单验证实例
- JSP表单验证实例
- JavaScript - 表单验证实例
- 简单表单验证收藏
- JavaScipt表单验证----简单
- 简单表单验证
- JavaScript 简单表单验证
- 简单的表单验证
- Git远程操作详解
- Java常用集合类型总结
- 数组为什么可以使用linq查询
- Android-TextView的includeFontPadding到底行不行
- 下载android
- 简单表单验证实例
- luoguP1216 数字三角形 题解
- super关键字调用父类构造方法
- MVC框架
- Android MagicaSakura多主题框架
- 微信企业付款开通入口
- Java File类 mkdir 不能创建多层目录
- mysql having
- [catsVSdogs]猫狗大战代码注释讲解_2