JavaScript基础—表单验证2
来源:互联网 发布:管家婆软件费用 编辑:程序博客网 时间:2024/06/08 05:44
<!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
- JavaScript基础—表单验证2
- JavaScript基础—表单验证
- JavaScript基础 表单验证
- JavaScript【表单验证2】
- javascript基础学习-表单验证(五)
- javascript 基础 js实现简单表单验证
- javascript基础编程应用表单验证
- JavaScript——表单验证
- javascript 表单验证大全 2
- javascript基础:表单处理2
- JavaScript 表单及表单验证
- 【javascript】学习总结——表单验证
- JavaScript表单——验证密码强度
- javaScript技巧(2):表单提交验证类
- javaScript技巧(2)表单提交验证类
- javaScript技巧(2):表单提交验证类
- javascript结合正则进行表单验证2
- 蜗牛—JavaScript学习之表单验证
- JavaScript基础—表单验证
- nodejs gzip 解压缩base64
- KafKa+Zookeeper+Flume部署脚本
- 指针函数与函数指针
- 百度登录框架
- JavaScript基础—表单验证2
- Unsupported major.minor version 51.0 错误解决方案
- 鼠标拖拽
- 2017.9.27 拥有csdn账号
- 利用JavaScript基础制作小样品
- 事件冒泡
- 用scikit-learn和pandas学习线性回归
- JavaScript基础—复选框的全选和反选
- JEESZ-kafka消息服务平台实现