HTML+CSS+JS设计注册页面

您所在的位置:网站首页 html注册表单的js代码 HTML+CSS+JS设计注册页面

HTML+CSS+JS设计注册页面

2024-05-16 05:50| 来源: 网络整理| 查看: 265

HTML实战——设计一个个人信息填写界面

应用的技术:HTML+CSS+JS

CSS和JS是套用的模板,主要练习了表单的验证和正则表达式的使用

效果图:

 

 

代码:

DOCTYPE html> 注册页面 填写个人信息 用户ID: 用户名: 口令: 确认口令: 生日: 学历: 专科 本科 硕士 研究生 博士 地区: 华南 东北 西北 北京 E-mail: 地址: 电话: 获奖经历: 已有账号?立即登录 版权所有:天岁 联系邮箱:[email protected]

JS代码:

window.onload = function () { //1.给表单绑定onsubmit事件 // document.getElementById("form").onsubmit = function () { // // return checkUserId() && checkName() && checkPassword1() && checkEmail() && checkPassword2() && checkTel(); // } //分别绑定离焦事件 document.getElementById("userId").onblur = checkUserId; document.getElementById("name").onblur = checkName; document.getElementById("password1").onblur = checkPassword1; document.getElementById("password2").onblur = checkPassword2; document.getElementById("email").onblur = checkEmail; document.getElementById("Tel").onblur = checkTel; } // 遍历学历 // function checkxueli() { // var xueli_list = document.getElementsByName("xueli"); // for(var i=0;i

个人信息

用户ID:

用户名:

生日:

学历:

地区:

E-mail:

地址:

电话:

备注:

// function a(){ // //获取userid的值,给id // let id=window.localStorage.getItem("userid"); // let name=window.localStorage.getItem("name"); // let password1=window.localStorage.getItem("password1"); // let birthday=window.localStorage.getItem("birthday"); // let xueli=window.localStorage.getItem("xueli"); // let area=window.localStorage.getItem("area"); // let email=window.localStorage.getItem("email"); // let address=window.localStorage.getItem("address"); // let Tel=window.localStorage.getItem("Tel"); // let comment=window.localStorage.getItem("comment"); // var a="用户Id:"+id+"\n"+"用户名:"+name+"\n"+"口令:"+password1+"\n"+"生日:"+birthday+"\n"+"学历:"+xueli // +"\n"+"地区:"+area+"\n"+"E-mial:"+email+"\n"+"地址:"+address+"\n"+"电话:"+Tel+"\n"+"备注:"+comment; // //test.html测试 // //获取userid的值,给id // // let id=window.localStorage.getItem("userid"); // // var a="用户Id:"+id; // alert(a); // } document.getElementById("userId").value=window.localStorage.getItem("userid"); document.getElementById("name").value=window.localStorage.getItem("name"); //document.getElementById("password1").value=window.localStorage.getItem("password1"); document.getElementById("birthday").value=window.localStorage.getItem("birthday"); document.getElementById("xueli").value=window.localStorage.getItem("xueli"); document.getElementById("area").value=window.localStorage.getItem("area"); document.getElementById("email").value=window.localStorage.getItem("email"); document.getElementById("address").value=window.localStorage.getItem("address"); document.getElementById("Tel").value=window.localStorage.getItem("Tel"); document.getElementById("comment").value=window.localStorage.getItem("comment");

 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3