要求
用JavaScript对HTML文件(见上一篇博客)进行数据访问,将获得的所有个人简历信息项的值以XML方式进行组织,并通过对话框显示出来;
(具体来说就是通过DOM来获得所有个人简历信息项的值,并显示在网页显示)
源代码
//进入页面的提示信息
alert("建议使用chrome或360浏览器打开");
//正则表达式校验手机号
function checkphone(){
var phone=document.getElementById('textphone').value;
var regx=/^1[3|5|7|8]{1}[0-9]{9}$/;
var flag=regx.test(phone);
return flag;
}
//正则表达式校验邮箱格式
function checkmail(){
var reg = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/;
var mail=document.getElementById('textmail').value;
var flag=reg.test(mail);
return flag;
}
//获取文本框中的值
function gettext(id){
return document.getElementById(id).value;
}
//获取下拉列表框的值
function getselect(id)
{
return document.getElementById(id).value;
}
function check(){//将数据显示成xml格式
var content='<?xml version="1.0" encoding="GB2312"?>';
//写DTD
content+='<!DOCTYPE resume['+'\n';;
content+='<!ELEMENT resume (students*)>'+'\n';
content+='<!ELEMENT students (name,sex,years,months,days,nation,location,politic,speciality,textphone,textmail,textaddress,hobby,background,languageskill,computerskill,award,experience,activities,selfassessment)>';
content+='<!ELEMENT name (#PCDATA)>'+'\n';
content+='<!ELEMENT sex (#PCDATA)>'+'\n';
content+='<!ELEMENT years (#PCDATA)>'+'\n';
content+='<!ELEMENT mouths (#PCDATA)>'+'\n';
content+='<!ELEMENT days (#PCDATA)>'+'\n';
content+='<!ELEMENT nation (#PCDATA)>'+'\n';
content+='<!ELEMENT location (#PCDATA)>'+'\n';
content+='<!ELEMENT politic (#PCDATA)>'+'\n';
content+='<!ELEMENT speciality (#PCDATA)>'+'\n';
content+='<!ELEMENT textphone (#PCDATA)>'+'\n';
content+='<!ELEMENT textmail (#PCDATA)>'+'\n';
content+='<!ELEMENT textaddress (#PCDATA)>'+'\n';
content+='<!ELEMENT hobby (#PCDATA)>'+'\n';
content+='<!ELEMENT background (#PCDATA)>'+'\n';
content+='<!ELEMENT languageskill (#PCDATA)>'+'\n';
content+='<!ELEMENT computerskill (#PCDATA)>'+'\n';
content+='<!ELEMENT award (#PCDATA)>'+'\n';
content+='<!ELEMENT experience (#PCDATA)>'+'\n';
content+='<!ELEMENT activities (#PCDATA)>'+'\n';
content+='<!ELEMENT selfassessment (#PCDATA)>'+'\n';
content+=']>'+'\n';
//再写xml
content+='<resume>'+'\n';
content+='<students>'+'\n';
content+='<name>'+gettext("textname")+'</name>'+'\n';
content+='<sex>'+getselect("sex")+'</sex>'+'\n';
content+='<years>'+getselect('years')+'</years>'+'\n';
content+='<months>'+getselect('months')+'</months>'+'\n';
content+='<days>'+getselect('days')+'</days>'+'\n';
content+='<nation>'+getselect('nation')+'</nation>'+'\n';
content+='<location>'+gettext('location')+'</location>'+'\n';
content+='<politic>'+getselect('politic')+'</politic>'+'\n';
content+='<speciality>'+getselect('speciality')+'</speciality>'+'\n';
content+='<textphone>'+gettext('textphone')+'</textphone>'+'\n';
content+='<textmail>'+gettext('textmail')+'</textmail>'+'\n';
content+='<textaddress >'+gettext('textaddress')+'</textaddress>'+'\n';
content+='<hobby >'+gettext('hobby')+'</hobby>'+'\n';
content+='<background>'+getselect('background')+'</background>'+'\n';
content+='<languageskill>'+gettext('languageskill')+'</languageskill>'+'\n';
content+='<computerskill>'+gettext('computerskill')+'</computerskill>'+'\n';
content+='<award>'+gettext('award')+'</award>'+'\n';
content+='<experience>'+gettext('experience')+'</experience>'+'\n';
content+='<activities>'+gettext('activities')+'</activities>'+'\n';
content+='<selfassessment>'+gettext('selfassessment')+'</selfassessmentt>'+'\n';
content+='</students>'+'\n'+'</resume>'+'\n';
if(checkphone()&&checkmail()){
alert(content);
}
else{
if(!checkphone()){
alert('手机号不符合正则表达式规范');
}
if(!checkmail()){
alert('邮箱格式不符合正则表达式规范');
}
}
}
HTML加入的代码
//位置自己定,我放在了class3块下
//添加按钮
<input type="button" style="background-color:white;height:30px;" value="xml格式数据" onclick="check()">
//引用js
<script src="个人简历.js">
</script>
效果图
主界面
点击xml格式数据