网站的后续优化方案,管理咨询公司怎么找客户,杭州赛虎网站建设,网站建设与管理案例教程 柳综合使用HTML、JavaScript和CSS进行注册页面设计#xff0c;实现以下若干功能#xff1a; 注意整个页面的色调和美观使用FramesetTable布局#xff08;div也可#xff09;对用户ID和用户名、口令不符合条件及时判断对口令不一致进行及时判断#xff08;34的及时判断#…
综合使用HTML、JavaScript和CSS进行注册页面设计实现以下若干功能 注意整个页面的色调和美观使用FramesetTable布局div也可对用户ID和用户名、口令不符合条件及时判断对口令不一致进行及时判断34的及时判断要求提示信息必须显示在同一个页面也就是说显示在当前的行的后面或者上面或者下面判断Email地址是否合法在“提交”后能在新页面显示所有的输入信息 效果展示 以下是代码实现
!DOCTYPE html
html langzhheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title注册页面/titlestylebody {font-family: Arial, sans-serif;background-color: #f4f4f4;color: #333;}.container {width: 50%;margin: 0 auto;background: #fff;padding: 20px;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}h2 {text-align: center;color: #4caf50;}.form-group {margin-bottom: 15px;}label {display: block;margin-bottom: 5px;}input[typetext],input[typepassword],input[typedate],input[typeemail],input[typetel] {width: 100%;padding: 8px;box-sizing: border-box;}.error {color: red;font-size: 0.9em;}button {background-color: #4caf50;color: white;padding: 10px 15px;border: none;border-radius: 5px;cursor: pointer;}button[typereset] {background-color: #f44336;}.radio-group {display: flex;gap: 10px;}.radio-group label {display: flex;align-items: center;}.radio-group input[typeradio] {margin-right: 5px;}/style/headbodydiv classcontainerh2注册页面/h2form idregistrationForm onsubmitreturn validateForm()div classform-grouplabel foruserId用户ID (6-8位):/labelinput typetext iduserId nameuserId required /span classerror iduserIdError/span/divdiv classform-grouplabel forusername用户名 (2-10位):/labelinput typetext idusername nameusername required /span classerror idusernameError/span/divdiv classform-grouplabel forpassword口令 (6-8位不能与用户ID相同):/labelinput typepassword idpassword namepassword required /span classerror idpasswordError/span/divdiv classform-grouplabel forconfirmPassword确认口令:/labelinputtypepasswordidconfirmPasswordnameconfirmPasswordrequired/span classerror idconfirmPasswordError/span/divdiv classform-grouplabel forbirthday生日 (格式: yyyy-mm-dd):/labelinputtypetextidbirthdaynamebirthdayplaceholderyyyy-mm-ddrequired/span classerror idbirthdayError/span/divdiv classform-grouplabel学历:/labeldiv classradio-grouplabelinputtyperadionameeducationvalue专科required/专科/labellabelinput typeradio nameeducation value本科 /本科/labellabelinputtyperadionameeducationvalue硕士研究生/硕士研究生/labellabelinputtyperadionameeducationvalue博士研究生/博士研究生/labellabelinput typeradio nameeducation value其他 /其他/label/div/divdiv classform-grouplabel forregion地区:/labelselect idregion nameregionoption value华南华南/optionoption value华东华东/optionoption value华北华北/optionoption value西南西南/optionoption value西北西北/option/select/divdiv classform-grouplabel foremailE-mail:/labelinput typeemail idemail nameemail required /span classerror idemailError/span/divdiv classform-grouplabel foraddress地址:/labelinput typetext idaddress nameaddress required //divdiv classform-grouplabel forphone电话 (数字和连字符例如123456-123):/labelinput typetel idphone namephone required /span classerror idphoneError/span/divdiv classform-grouplabel forremarks备注:/labeltextarea idremarks nameremarks rows4/textarea/divbutton typesubmit提交/buttonbutton typereset重置/button/form/divscriptfunction validateForm() {let valid true;// 清除之前的错误信息document.querySelectorAll(.error).forEach((el) (el.textContent ));// 用户ID验证const userId document.getElementById(userId).value;if (userId.length 6 || userId.length 8) {document.getElementById(userIdError).textContent 用户ID必须为6-8位;valid false;}// 用户名验证const username document.getElementById(username).value;if (username.length 2 || username.length 10) {document.getElementById(usernameError).textContent 用户名必须为2-10位;valid false;}// 口令验证const password document.getElementById(password).value;if (password.length 6 || password.length 8 || password userId) {document.getElementById(passwordError).textContent 口令必须为6-8位且不能与用户ID相同;valid false;}// 确认口令验证const confirmPassword document.getElementById(confirmPassword).value;if (confirmPassword ! password) {document.getElementById(confirmPasswordError).textContent 口令不一致;valid false;}// 生日格式验证const birthday document.getElementById(birthday).value;const birthdayPattern /^\d{4}-\d{2}-\d{2}$/;if (!birthdayPattern.test(birthday)) {document.getElementById(birthdayError).textContent 生日格式不正确必须为yyyy-mm-dd;valid false;}// Email验证const email document.getElementById(email).value;const emailPattern /^[^\s][^\s]\.[^\s]$/;if (!emailPattern.test(email)) {document.getElementById(emailError).textContent 请输入有效的Email地址;valid false;}// 电话验证const phone document.getElementById(phone).value;const phonePattern /^\d{6}-\d{3}$/;if (!phonePattern.test(phone)) {document.getElementById(phoneError).textContent 电话格式不正确;valid false;}// 如果所有验证通过显示输入信息if (valid) {const formData h2注册信息/h2p用户ID: ${userId}/pp用户名: ${username}/pp口令: ${password}/pp生日: ${birthday}/pp学历: ${document.querySelector(input[nameeducation]:checked).value}/pp地区: ${document.getElementById(region).value}/ppE-mail: ${email}/pp地址: ${document.getElementById(address).value}/pp电话: ${phone}/pp备注: ${document.getElementById(remarks).value}/p;const newWindow window.open(, _blank);newWindow.document.write(htmlheadtitle注册信息/titlestylebody { font-family: Arial, sans-serif; }h2 { color: #4CAF50; }/style/headbody${formData}/body/html);newWindow.document.close(); // 关闭文档流}return false; // 防止表单提交}/script/body
/html
