javascript初级代码学习.zip_zblog怎么在head标签里插入头条自动收录的js代码资源-CSDN文库

共43个文件

html：42个

js：1个

版权申诉

javascript

151 浏览量 2023-11-07 10:37:58 上传评论收藏 47KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

javascript初级代码学习.zip （43个子文件）

javascript

002-HTML中嵌入JavaScript代码的第二种方式.html 1KB

003-HTML中嵌入JavaScript代码的第三种方式.html 875B

1.js 171B

001-HTML中嵌入JavaScript代码的第一种方式.html 2KB

js-code

DOM

001-DOM编程-获取文本框的value.html 2KB

005-表单验证.html 6KB

008-显示网页时钟.html 2KB

003-DOM编程-关于正则表达式.html 4KB

007-获取下拉列表选中项的value.html 2KB

006-复选框的全选和取消全选.html 2KB

009-内置支持类Array.html 1KB

002-DOM编程-innerHTML和innerText操作div和span.html 1KB

004-去除字符串的前后空白trim.html 2KB

JSON

001.html 2KB

002.html 922B

003-eval函数.html 2KB

004-设置table的tbody.html 2KB

BOM

003-弹出消息框和确认框.html 707B

008-设置浏览器地址栏上的URL.html 1KB

006-history对象.html 230B

007.html 272B

002-open.html 193B

004-当前窗口设置为顶级窗口.html 464B

001-BOM编程-open和close.html 1KB

005-child-window.html 520B

ECMAScript

008-JS中的数据类型.html 2KB

021-JS的控制语句.html 2KB

004-关于JS中的变量.html 3KB

013-Object类型.html 4KB

018-JS代码设置节点的属性.html 561B

009-Undefined类型.html 572B

005-JS函数初步.html 2KB

007-JS的局部变量和全局变量.html 2KB

019-JS代码捕捉回车键.html 1KB

011-Boolean类型.html 1KB

006-JS函数初步.html 1KB

015-JS的常用事件-注册事件的两种方式.html 3KB

020-JS的void运算符.html 5KB

010-Number类型.html 2KB

012-String类型.html 2KB

017-JS代码的执行顺序.html 748B

016-关于JS代码的执行顺序.html 827B

014-null NaN undefined这三个值有什么区别.html 928B

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单验证</title> <style type="text/css"> span { color: red; font-size: 12px; } </style> </head> <body> <script type="text/javascript"> /* （1）用户名不能为空（2）用户名必须在6-14位之间（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）（4）密码和确认密码一致，邮箱地址合法。（5）统一失去焦点验证（6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。（7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value （8）最终表单中所有项均合法方可提交 */ window.onload = function(){ // 获取username的span标签 var usernameErrorSpan = document.getElementById("usernameError"); // 给用户名文本框绑定blur事件 var usernameElt = document.getElementById("username"); usernameElt.onblur = function(){ // 获取用户名 var username = usernameElt.value; // 去除前后空白 username = username.trim(); // 判断用户名是否为空 /* if(username){ // 代表username不是空字符串 alert("username = " + username); }else{ // 代表username是空字符串 alert("username是空字符串"); } */ // if(username.length == 0){} if(username === ""){ // 用户名为空 usernameErrorSpan.innerText = "用户名不能为空"; }else{ // 用户名不为空 // 继续判断长度[6-14] if(username.length < 6 || username.length > 14){ // 用户名长度非法 usernameErrorSpan.innerText = "用户名长度必须在[6-14]之间"; }else{ // 用户名长度合法 // 继续判断是否含有特殊符号 var regExp = /^[A-Za-z0-9]+$/; var ok = regExp.test(username); if(ok){ // 用户名最终合法 }else{ // 用户名中含有特殊符号 usernameErrorSpan.innerText = "用户名只能由数字和字母组成"; } } } } // 给username这个文本框绑定获得焦点事件 usernameElt.onfocus = function(){ // 清空非法的value if(usernameErrorSpan.innerText != ""){ usernameElt.value = ""; } // 清空span usernameErrorSpan.innerText = ""; } // 获取密码错误提示的span标签 var pwdErrorSpan = document.getElementById("pwdError"); // 获取确认密码框对象 var userpwd2Elt = document.getElementById("userpwd2"); // 绑定blur事件 userpwd2Elt.onblur = function(){ // 获取密码和确认密码 var userpwdElt = document.getElementById("userpwd"); var userpwd = userpwdElt.value; var userpwd2 = userpwd2Elt.value; if(userpwd != userpwd2){ // 密码不一致 pwdErrorSpan.innerText = "密码不一致"; }else{ // 密码一致 } } // 绑定focus事件 userpwd2Elt.onfocus = function(){ if(pwdErrorSpan.innerText != ""){ userpwd2Elt.value = ""; } pwdErrorSpan.innerText = ""; } // 获取email的span var emailSpan = document.getElementById("emailError"); // 给email绑定blur事件 var emailElt = document.getElementById("email"); emailElt.onblur = function(){ // 获取email var email = emailElt.value; // 编写email的正则 var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; var ok = emailRegExp.test(email); if(ok){ // 合法 }else{ // 不合法 emailSpan.innerText = "邮箱地址不合法"; } } // 给emailElt绑定focus emailElt.onfocus = function(){ if(emailSpan.innerText != ""){ emailElt.value = ""; } emailSpan.innerText = ""; } // 给提交按钮绑定鼠标单击事件 var submitBtnElt = document.getElementById("submitBtn"); submitBtn.onclick = function(){ // 触发username的blur userpwd2的blur email的blur // 不需要人工操作,使用纯JS代码触发事件. usernameElt.focus(); usernameElt.blur(); userpwd2Elt.focus(); userpwd2Elt.blur(); emailElt.focus(); emailElt.blur(); // 当所有表单项都是合法的时候,提交表单 if(usernameErrorSpan.innerText == "" && pwdErrorSpan.innerText == "" && emailSpan.innerText == ""){ // 获取表单对象 var userFormElt = document.getElementById("userForm"); // 可以在这里设置action,也可以不在这里. userFormElt.action = "http://localhost:8080/jd/save"; // 提交表单 userFormElt.submit(); } } } </script>   <form id="userForm" method="get"> 用户名<input type="text" name="username" id="username"/><span id="usernameError"></span><br> 密码<input type="text" name="userpwd" id="userpwd"/><br> 确认密码<input type="text" id="userpwd2" /><span id="pwdError"></span><br> 邮箱<input type="text" name="email" id="email" /><span id="emailError"></span><br>  <input type="button" value="注册" id="submitBtn"/> <input type="reset" value="重置" /> </form> </body> </html>

评论收藏

内容反馈

版权申诉