表单验证
来源:互联网 发布:vscode自动补全 编辑:程序博客网 时间:2024/06/04 18:54
<!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
- 验证表单
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 使用 Visual Studio 对源代码文件进行哈希处理以确保文件完整性
- Docker基础入门及示例
- Linux+Nginx+Asp.net Core部署
- 开源免费的.NET图像即时处理的组件ImageProcessor
- .NET Core项目从xproj+project.json向csproj迁移简介
- 表单验证
- 广东省强网杯CTF Web部分详解
- 老司机实战Windows Server Docker:1 初体验之各种填坑
- 跨平台的.NET邮件协议MailKit组件解析
- [ASP.NET Core] Middleware
- OAuth2.0 知多少
- 使用 Angular
- .Net Core迁移到MSBuild平台
- unity开发htc VR实现瞬移功能