JavaScript技术练习小项目_javascript项目练习资源-CSDN文库

共16个文件

html：14个

js：2个

javascript

需积分: 5 167 浏览量 2024-03-10 10:53:43 上传评论收藏 14KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

js_code.rar （16个子文件）

js_code

riqi.html 1KB

省市联动.html 4KB

dom操作样式.html 2KB

表单校验.html 5KB

sc.js 41B

02.html 1KB

05.html 2KB

nine.html 768B

01.html 996B

03.html 3KB

启停闹钟.html 2KB

my.js 17B

dom获取元素.html 5KB

04.html 646B

隔行变色.html 5KB

06.html 1KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>14-案例-表单校验</title> <style type="text/css"> .regist_bg { width: 100%; height: 600px; padding-top: 40px; background-image: url(../img/bg.jpg); } .regist { border: 7px inset #ccc; width: 700px; padding: 40px 0; padding-left: 80px; background-color: #fff; margin-left: 25%; border-radius: 10px; } input[type="submit"] { background-color: aliceblue; width: 100px; height: 35px; color: red; cursor: pointer; border-radius: 5px; } .warn{ color:red; font-size: 12px; display: none; } </style>  </head> <body> <div class="regist_bg"> <div class="regist"> <form action="#" onsubmit="javascript:return jundgeSubmit()"> <table width="700px" height="350px"> <tr> <td colspan="3"> <font color="#3164af">会员注册</font> USER REGISTER </td> </tr> <tr> <td align="right">用户名</td> <td colspan="2"><input id="loginnameId" type="text" name="loginname" size="50" /></td> </tr> <tr> <td align="right">密码</td> <td colspan="2"><input id="loginpwdId" type="password" name="loginpwd" size="50" /> </td> </tr> <tr> <td align="right">确认密码</td> <td colspan="2"><input id="reloginpwdId" type="password" name="reloginpwd" size="50" /><span id="pwdwarn" class="warn">密码不一致</span> </td> </tr> <tr> <td align="right">Email</td> <td colspan="2"><input id="emailId" type="text" name="email" size="50" /> <span id="emailwarn" class="warn">邮箱格式有误</span> </td> </tr> <tr> <td align="right">姓名</td> <td colspan="2"><input name="text" name="username" size="50" /> </td> </tr> <tr> <td align="right">性别</td> <td colspan="2"> <input type="radio" name="gender" value="男" checked="checked" />男 <input type="radio" name="gender" value="女" />女 </td> </tr> <tr> <td align="right">电话号码</td> <td colspan="2"><input type="text" name="phone" size="50" /> </td> </tr> <tr> <td align="right">所在地</td> <td colspan="3"> <select id="provinceId" onchange="selectCity(this.value)" style="width:150px"> <option value="">----请-选-择-省----</option> <option value="0">北京</option> <option value="1">辽宁省</option> <option value="2">江苏省</option> </select> <select id="cityId" style="width:150px"> <option>----请-选-择-市----</option> </select> </td> </tr> <tr> <td width="80" align="right">验证码</td> <td width="100"><input type="text" name="verifyCode" /> </td> <td><img src="../img/checkMa.png" /> </td> </tr> <tr> <td></td> <td colspan="2"> <input id="rebtn" type="button" value="注册" /> </td> </tr> </table> </form> </div> </div> <script > // 1. 两次密码输入一致 //获取原密码值 let loginpwd = document.querySelector("#loginpwdId");//密码输入框对象 //获取确认密码值 let reloginpwd = document.querySelector("#reloginpwdId");//密码输入框对象 function pwd(){ //比较两个值,如果不相等提示警告 let pwdwarn = document.querySelector("#pwdwarn");//密码警告 if (loginpwd.value == reloginpwd.value) { pwdwarn.style.display = "none";//不显示警告 return true;//校验通过 }else{ pwdwarn.style.display = "inline";//不显示警告 return false } } reloginpwd.onchange = pwd ;//确认密码值改变时进行校验 // 2. 邮箱格式正确 //获取邮箱输入框元素 let email = document.querySelector("#emailId");//获取邮箱输入框元素 let emailwarn = document.querySelector("#emailwarn");//邮箱警告元素 //判断邮箱格式是否正确,格式有误提示警告 function judgeEmail(){ let emailRegexp = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/; let boo = emailRegexp.test(email.value);//判断邮箱格式 if (boo) { emailwarn.style.display = "none";//不显示警告 return true;//校验通过 }else{ emailwarn.style.display = "inline";//不显示警告 return false } } email.onchange = judgeEmail;//邮箱地址值改变时进行校验 // 3. 手机号格式正确 let phoneRegexp = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/; //4. 提交表单时校验表单项是否合法. function jundgeSubmit(){ console.log("执行表单校验"); let boo = pwd() && judgeEmail() ;//所有校验全部合法才提交表单 console.log(boo); return boo;//为true允许提交表单, 为false阻止表单提交 } </script> </body> </html>

评论收藏

内容反馈