分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！
做个笔记，以后直接用吧。
报名界面：
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%><%@ include file="/public/taglibs.jsp"%><%@ include file="/public/artDialog.jsp"%><html> <head> <title>${webname}-报名界面</title> <%@ include file="/public/meta.jsp"%> <script type="text/javascript" src="/js/common/Data_location.js"></script> <script type="text/javascript" src="/js/common/Data_folk.js"></script> <script type="text/javascript" src="/js/common/Data_edu.js"></script> <script type="text/javascript" src="/js/common/Data_depart.js"></script> <script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script> <link rel="stylesheet" href="/js/jquery/plugins/validform/style.css" type="text/css" media="all" /> <link rel="stylesheet" href="/css/index.css" type="text/css" media="all" /> <style type="text/css">#area_td select { width: 115px;}</style> <script type="text/javascript"> //DOM加载完成后即初始化动态数据，代替onload避免图片加载时的等待 $(document).ready(function() { init(); }); function init(){ getAllDps(); getAllFolks(); getAllEducations(); getAllProvs();//查询省 } function getAllEducations(){ for(var index in location_edus){ var edu = location_edus[index]; $("#education").append("<option value="+edu.id+" >"+edu.n+"</option>"); } } function getAllFolks(){ for(var index in location_folks){ var folk = location_folks[index]; $("#folk").append("<option value="+folk.id+" >"+folk.n+"</option>"); } } function getAllDps(){ for(var index in location_departs){ var depart = location_departs[index]; $("#dp").append("<option value="+depart.id+" >"+depart.n+"</option>"); } } function getAllProvs(currentcode){ for(var index in location_provs){ var prov = location_provs[index]; $("#prov").append("<option value="+prov.c+" >"+prov.n+"</option>"); } } function getCitiesByProvCode(currentcode){ var provcode=$("#prov option:selected").val(); $("#area").empty(); $("#area").append("<option value=\"-1\" >请选择</option>"); $("#city").empty(); $("#city").append("<option value=\"-1\" >请选择</option>"); for(var index in location_cities){ var city = location_cities[index]; if(city.p==provcode){ var s=''; if(currentcode==city.c){ s='selected="selected"'; } $("#city").append("<option "+s+" value="+city.c+" >"+city.n+"</option>"); } } } function getAreasByCityCode(currentcode){ var citycode=$("#city option:selected").val(); $("#area").empty(); $("#area").append("<option value=\"-1\" >请选择</option>"); for(var index in location_areas){ var area = location_areas[index]; if(area.p==citycode){ var s=''; if(currentcode==area.c){ s='selected="selected"'; } $("#area").append("<option "+s+" value="+area.c+" >"+area.n+"</option>"); } } } </script> </head> <body> <div class="container"> <div id="topmenu"> <IFRAME NAME="topm" width=100% height="217px" frameborder=0 marginwidth=0 marginheight=0 SRC="/public/head.html" scrolling=no allowTransparency="true"></IFRAME> </div> <div class="centent_zxzc"> <div class="left_zxzc"> <p> 右侧表格中带*是必填项；已注册用户请勿重复注册，您的 <span class="red">默认密码为：111111</span>，请您登陆后修改密码，忘记密码请联系我们。请您务必准确填写各项信息，信息的准确度将直接影响您的报名资质及后期发票、学习资料和结业证书送达工作。 </p> </div> <div class="right_zxzc"> <div class="zxzc_title"> <img src="../images/zxzc_03.gif"> </div> <form action="/register/peBzzRec_register.action" method="post" class="registerfrm"> <table class="datalist3" cellpadding="0" cellspacing="0" width="680"> <tr> <td width="80" rowspan="7" align="center" bgcolor="#f3f3f3"> 个人信息 </td> <td width="60"> <span class="redfont">*</span>用户名 </td> <td class="lefttd"> <input type="text" name="peBzzRecruit.ssoUser.userName" ajaxurl="/register/peBzzRec_checkUsername.action" id="loginId" class="inputxt" datatype="u3-19" errormsg="用户名4-20个汉字、字母、下划线和数字！" maxlength="30" size="30" /> <span class="Validform_checktip">用于登录名。长度为4-20，只能输入字母、数字和下划线</span> </td> </tr> <tr> <td> <span class="redfont">*</span>密 码 </td> <td class="lefttd"> <input type="text" value="111111" readonly="readonly" size="30" maxlength="25" /> <span class="Validform_checktip">默认密码：6个1。请您牢记密码！登录后可修改。</span> </td> </tr> <tr> <td> <span class="redfont">*</span>姓 名 </td> <td class="lefttd"> <input type="text" name="peBzzRecruit.name" id="name" class="inputxt" datatype="t2-15" errormsg="姓名2-15个汉字、字母、下划线和数字！" maxlength="30" size="30" /> <span class="Validform_checktip">请填写您的真实姓名，用于证书发放</span> </td> </tr> <tr> <td> <span class="redfont">*</span>性 别 </td> <td class="lefttd"> <select name="peBzzRecruit.enumConstByGender.id" datatype="*" nullmsg="请选择性别" style="width: 175px;"> <option value=""> --- 请选择性别--- </option> <option value="402880911da481e0011da4963df60004"> 男 </option> <option value="402880911da481e0011da49697130005"> 女 </option> </select> <span class="Validform_checktip"></span> </td> </tr> <tr> <td> <span class="redfont"></span>民 族 </td> <td class="lefttd"> <SELECT id="folk" name="peBzzRecruit.enumConstByFlagFolk.id" style="width: 175px;"> <OPTION value="-1"> --- 请选择民族--- </OPTION> </SELECT> <span class="Validform_checktip"></span> </td> </tr> <tr> <td> <span class="redfont">*</span>出生日期 </td> <td class="lefttd"> <input type="text" name="peBzzRecruit.birthdayDate" datatype="*" id="birthday" readonly="readonly" onClick="WdatePicker({maxDate:'%y-%M-%d'})" size="30" /> <span class="Validform_checktip">请选择您的真实出生日期，用于证书发放。</span> </td> </tr> <tr> <td> <span class="redfont">*</span>学 历 </td> <td class="lefttd"> <select id="education" name="peBzzRecruit.enumConstByFlagEducation.id" datatype="*" nullmsg="请选择学历" style="width: 175px;"> <option value=""> --- 请选择学历--- </option> </select> <span class="Validform_checktip"></span> </td> </tr> <tr> <td width="50" rowspan="9" align="center" bgcolor="#f3f3f3"> 通讯信息 </td> <td> <span class="redfont">*</span>工作单位 </td> <td class="lefttd"> <input type="text" name="peBzzRecruit.department" id="depart" class="inputxt" datatype="t4-25" errormsg="工作单位4-25个汉字、字母、下划线和数字！" maxlength="50" size="30" /> <span class="Validform_checktip">工作单位4-25个汉字、字母、下划线和数字</span> </td> </tr> <tr> <td> <span class="redfont"></span>职称职务 </td> <td class="lefttd"> <input type="text" name="peBzzRecruit.position" id="position" class="inputxt" ignore="ignore" datatype="t2-15" errormsg="职称2-15个汉字、字母、下划线和数字！" maxlength="30" size="30" /> <span class="Validform_checktip">职称2-15个字符 </span> </td> </tr> <tr> <td> <span class="redfont">*</span>手 机 </td> <td class="lefttd"> <input type="text" name="peBzzRecruit.mobilePhone" id="mobilePhone" class="inputxt mobile" datatype="m" errormsg="手机号为11位有效号码！" maxlength="30" size="30" /> <span class="Validform_checktip">请输入11位有效手机号，方便学习联系。</span> </td> </tr> <tr> <td> <span class="redfont">*</span>电 话 </td> <td class="lefttd"> <input type="text" name="peBzzRecruit.phone" id="phone" class="inputxt" datatype="c" errormsg="电话号码格式不正确！" maxlength="30" size="30" /> <span class="Validform_checktip">例如：0712-7827881,58731118</span> </td> </tr> <tr> <td> 传 真 </td> <td class="lefttd"> <input type="text" ignore="ignore" name="peBzzRecruit.fax" id="fax" class="inputxt" datatype="c" errormsg="传真格式为0712-7827881或58731118！" maxlength="30" size="30" /> <span class="Validform_checktip">和电话号码格式一致</span> </td> </tr> <tr> <td> <span class="redfont">*</span>Email </td> <td class="lefttd"> <input type="text" name="peBzzRecruit.email" id="email" class="inputxt" datatype="e" errormsg="邮箱格式不正确！" maxlength="30" size="30" /> <span class="Validform_checktip">请输入真实邮件地址，用于发送您的报名信息。</span> </td> </tr> <tr> <td> <span class="redfont">*</span>邮政编码 </td> <td class="lefttd"> <input type="text" ignore="ignore" name="peBzzRecruit.zipcode" id="zipcode" onkeypress="KeyPress(this.value);" class="inputxt" datatype="p" errormsg="邮政编码6个数字！" maxlength="30" size="30" /> <span class="Validform_checktip">请输入6位邮政编码 </span> </td> </tr> <tr> <td> <span class="redfont">*</span>所在地区 </td> <td class="lefttd" id="area_td" colspan="3"> <select id="prov" name="provcode" onchange="getCitiesByProvCode();" datatype="city"> <option value="-1"> 请选择 </option> </select> <select id="city" name="citycode" onchange="getAreasByCityCode();" style="margin-left: 20px;" datatype="city"> <option value="-1"> 请选择 </option> </select> <select id="area" name="peBzzRecruit.peEnterprise.code" style="margin-left: 20px;" datatype="city"> <option value="-1"> 请选择 </option> </select> <span class="Validform_checktip"></span> </td> </tr> <tr> <td> <span class="redfont">*</span>详细地址 </td> <td class="lefttd" colspan="3"> <input type="text" name="peBzzRecruit.address" id="address" maxlength="25" size="30" class="inputxt" datatype="t4-25" errormsg="地址4-25个汉字、字母、下划线和数字！" maxlength="30" /> <span class="Validform_checktip">上面选择省市，此处仅写除省市外的详细地址</span> </td> </tr> <tr> <td bgcolor="#f3f3f3"> 单位属性 </td> <td> <span class="redfont">*</span>单位属性 </td> <td class="lefttd" colspan="2"> <select id="dp" name="peBzzRecruit.enumConstByFlagDepartProperty.id" datatype="*" nullmsg="请选择单位属性" style="width: 175px;"> <option value=""> --- 请选择单位属性--- </option> </select> <span class="Validform_checktip">请选择您的单位属性</span> </td> </tr> </table> <div style="padding-right: 200px;"> <input style="display: none;" type="submit" value="提交" id="sub" /> <input style="display: none;" type="reset" value="重填" id="res" /> <div class="tijiao"> <a href="javascript:void(0);" onclick="$('#res').click();">重填</a> </div> <div class="tijiao" id="subdiv"> <a id="subbtn" href="javascript:void(0);" onclick="$('#sub').click();">提交</a> </div> <span id="msgdemo" style="margin-left: 30px;"></span> <br /> <br /> <br /> </div> </form> </div> </div> <div id="bottommenu"> <IFRAME NAME="bottomm" width=100% height="100px" frameborder=0 marginwidth=0 marginheight=0 SRC="/public/bottom.html" scrolling=no allowTransparency="true" align="center"></IFRAME> </div> </div> </body> <script type="text/javascript" src="/js/jquery/plugins/validform/Validform.js"></script> <script type="text/javascript">$(function() { var showmsg=function(msg){//假定你的信息提示方法为showmsg， 在方法里可以接收参数msg，当然也可以接收到o及cssctl; if(msg.stat=="y"){ window.location.href=msg.url; }else if(msg.stat&&msg.stat!="undefined"){ $("#subbtn").disabled="";//启用提交按钮，如果出现错误可以再次提交 artAlert("在线报名失败，原因："+msg.stat,"e"); } } $(".registerfrm").Validform({ tiptype:function(msg,o,cssctl){ if(!o.obj.is("form")){//验证表单元素时o.obj为该表单元素，全部验证通过提交表单时o.obj为该表单对象; //var objtip=$("#Validform_checktip"); var objtip=o.obj.siblings(".Validform_checktip");//指定错误提示控件 cssctl(objtip,o.type); objtip.text(msg); }else{//type指示提示的状态，值为1、2、3、4， 1：正在检测/提交数据，2：通过验证，3：验证失败 if(o.type=="1"){ $("#subbtn").disabled="disabled";//提交时禁用提交按钮 } } }, ajaxPost:true, callback:function(data){ showmsg(data); }, showAllError:true,//一次性提示所有错误，正式和测试可用 datatype:{//传入自定义datatype类型 "u2-4" : /^[0-9a-zA-Z]{1}\w{2,4}$/,//数字和字母开头，后面可以有下划线u2-4和后面的{2,4}数字保持一致 "c":/^(\d{3,4}-)?\d{7,8}$/,//传真或电话 "t2-4" : /^([\u4E00-\u9FA5\uf900-\ufa2d]|\w){2,4}$/,//中文,字母，下划线和数字 "phone":function(gets,obj,curform,regxp){ /*参数gets是获取到的表单元素值，obj为当前表单元素，curform为当前验证的表单，regxp为内置的一些正则表达式的引用。*/ var reg1=regxp["m"], reg2=/(^(\d{3,4}-)?\d{7,8})$/,//电话号码3-4位前，7-8位尾 mobile=curform.find(".mobile"); //如果手机和电话号码都不为空 if(mobile.val()!=""&&gets!=""){ if(reg1.test(mobile.val())){ if(reg2.test(gets)){ return true; }else{ return "电话号码格式不正确。"; } }else{ return "手机号码格式不正确。"; } } if(reg2.test(gets)){ if(mobile.val()!=""&&mobile.val().replace(/(^\s*)|(\s*$)/g, "")==""){ return "手机号码不能为空或空格"; }else{ return true; } } if(reg1.test(mobile.val())){ if(gets!=""&&gets.replace(/(^\s*)|(\s*$)/g, "")!=""){ return "电话号码不能为空或空格"; }else{ return true; } } return false; }, "city":function(gets,obj,curform,regxp){ var prov=$("#prov option:selected").val(); if(prov==-1){ return "请选择省份！"; }else{ var c=$("#city").find("option"); if(c.length>1){ var city=$("#city option:selected").val(); if(city==-1){ return "请选择市！"; }else{ var a=$("#area").find("option"); if(a.length>1){ var area=$("#area option:selected").val(); if(area==-1){ return "请选择县！"; } } } } } return true; } } });})</script></html>
上面导入的JS中，比如这样一个：
var location_edus =[{"id":"education01","n":"初中"},{"id":"education02","n":"高中"},{"id":"education03","n":"职高"},{"id":"education04","n":"中专"},{"id":"education05","n":"技校"},{"id":"education06","n":"大专"},{"id":"education07","n":"本科"},{"id":"education08","n":"硕士"},{"id":"education09","n":"博士"}];
修改界面：
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%><%@ include file="/public/taglibs.jsp"%><%@ include file="/public/checkLogin.jsp"%><html> <head> <title>${webname}-报名个人信息</title> <%@ include file="/public/meta.jsp"%> <%@ include file="/public/artDialog.jsp"%> <script type="text/javascript" src="/js/common/Data_location.js"></script> <script type="text/javascript" src="/js/common/Data_folk.js"></script> <script type="text/javascript" src="/js/common/Data_edu.js"></script> <script type="text/javascript" src="/js/common/Data_depart.js"></script> <script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script> <link rel="stylesheet" href="/js/jquery/plugins/validform/style.css" type="text/css" media="all" /> <link rel="stylesheet" href="/css/index.css" type="text/css" media="all" /> <style type="text/css">#area_td select { width: 115px;}</style> <script type="text/javascript"> $(document).ready(function() { init(); }); function init(){ getAllDps(); getAllFolks(); getAllEducations(); var level='<s:property value="#attr.peBzzStudent.peEnterprise.level"/>'; var currentcode='<s:property value="#attr.peBzzStudent.peEnterprise.code"/>';//用户所在省，市，县 if(level==1){ getAllProvs(currentcode);//查询省 } else if(level==2){//如果是2级，则查询2级市 var provcode='<s:property value="#attr.peBzzStudent.peEnterprise.peEnterprise.code"/>'; getAllProvs(provcode);//查询省 getCitiesByProvCode(currentcode);//0表示首次加载时 根据省查询市 } else if(level==3){//如果是3级，则查询2级市和县区 var provcode='<s:property value="#attr.peBzzStudent.peEnterprise.peEnterprise.peEnterprise.code"/>'; var citycode='<s:property value="#attr.peBzzStudent.peEnterprise.peEnterprise.code"/>'; getAllProvs(provcode);//查询省 getCitiesByProvCode(citycode); getAreasByCityCode(currentcode);如果是3级，则查询3级县区 }else{ getAllProvs();//查询省 } } function getAllEducations(){ for(var index in location_edus){ var edu = location_edus[index]; var s=''; var eid='<s:property value="#attr.peBzzStudent.enumConstByFlagEducation.id"/>'; if(eid==edu.id){ s='selected="selected"'; } $("#education").append("<option "+s+" value="+edu.id+" >"+edu.n+"</option>"); } } function getAllFolks(){ for(var index in location_folks){ var folk = location_folks[index]; var s=''; var fid='<s:property value="#attr.peBzzStudent.enumConstByFlagFolk.id"/>'; if(fid==folk.id){ s='selected="selected"'; } $("#folk").append("<option "+s+" value="+folk.id+" >"+folk.n+"</option>"); } } function getAllDps(){ for(var index in location_departs){ var depart = location_departs[index]; var s=''; var fid='<s:property value="#attr.peBzzStudent.enumConstByFlagDepartProperty.id"/>'; if(fid==depart.id){ s='selected="selected"'; } $("#dp").append("<option "+s+" value="+depart.id+" >"+depart.n+"</option>"); } } function getAllProvs(currentcode){ for(var index in location_provs){ var prov = location_provs[index]; var s=''; if(currentcode==prov.c){ s='selected="selected"'; } $("#prov").append("<option "+s+" value="+prov.c+" >"+prov.n+"</option>"); } } function getCitiesByProvCode(currentcode){ var provcode=$("#prov option:selected").val(); $("#area").empty(); $("#area").append("<option value=\"-1\" >请选择</option>"); $("#city").empty(); $("#city").append("<option value=\"-1\" >请选择</option>"); for(var index in location_cities){ var city = location_cities[index]; if(city.p==provcode){ var s=''; if(currentcode==city.c){ s='selected="selected"'; } $("#city").append("<option "+s+" value="+city.c+" >"+city.n+"</option>"); } } } function getAreasByCityCode(currentcode){ var citycode=$("#city option:selected").val(); $("#area").empty(); $("#area").append("<option value=\"-1\" >请选择</option>"); for(var index in location_areas){ var area = location_areas[index]; if(area.p==citycode){ var s=''; if(currentcode==area.c){ s='selected="selected"'; } $("#area").append("<option "+s+" value="+area.c+" >"+area.n+"</option>"); } } } </script> </head> <body> <div class="centent_zxzc"> <div style="margin-left: 20px;"> <form action="/entity/workspaceStudent/bzzstudent_examModifyInfo.action" method="post" name="registerfrm" class="registerfrm"> <table class="datalist3" cellpadding="0" style="float: left;" cellspacing="0" width="770"> <caption style="font-size: 20px; color: green; margin: 10px 0px 10px 0px;"> * 学 员 基 本 信 息 * </span> </caption> <tr> <td width="80" rowspan="6" align="center" bgcolor="#f3f3f3"> 个人信息 </td> <td width="60"> <span class="redfont">*</span>用户名 </td> <td class="lefttd"> <input type="text" name="peBzzStudent.ssoUser.loginId" value="${peBzzStudent.ssoUser.userName}" id="loginId" readonly="readonly" maxlength="30" size="30" /> <span class="Validform_checktip">用户名不可更改！</span> </td> </tr> <tr> <td> <span class="redfont">*</span>姓 名 </td> <td class="lefttd"> <input type="text" name="peBzzStudent.trueName" value="${peBzzStudent.trueName}" id="name" class="inputxt" datatype="t2-15" errormsg="姓名2-15个汉字、字母、下划线和数字！" maxlength="25" size="30" /> <span class="Validform_checktip">请填写您的真实姓名，用于证书发放</span> </td> </tr> <tr> <td> <span class="redfont">*</span>性 别 </td> <td class="lefttd"> <%--sex的value指定为id，懒加载--%> <select name="peBzzStudent.enumConstByGender.id" datatype="*" nullmsg="请选择性别" style="width: 175px;"> <option value=""> --- 请选择性别--- </option> <option value="402880911da481e0011da4963df60004" <c:if test="${peBzzStudent.enumConstByGender !=null&&peBzzStudent.enumConstByGender.id eq '402880911da481e0011da4963df60004'}"> selected="selected" </c:if>> 男 </option> <option value="402880911da481e0011da49697130005" <c:if test="${peBzzStudent.enumConstByGender !=null&&peBzzStudent.enumConstByGender.id eq '402880911da481e0011da49697130005'}"> selected="selected" </c:if>> 女 </option> </select> <span class="Validform_checktip"></span> </td> </tr> <tr> <td> <span class="redfont"></span>民 族 </td> <td class="lefttd"> <SELECT id="folk" ignore="ignore" datatype="*" name="peBzzStudent.enumConstByFlagFolk.id" style="width: 175px;"> <OPTION value=""> ---请选择民族--- </OPTION> </SELECT> <span class="Validform_checktip"></span> </td> </tr> <tr> <td> <span class="redfont">*</span>出生日期 </td> <td class="lefttd"> <input type="text" name="peBzzStudent.birthdayDate" datatype="*" value="<fmt:formatDate pattern="yyyy-MM-dd" value="${peBzzStudent.birthdayDate}"/>" id="birthday" readonly="readonly" onClick="WdatePicker({maxDate:'%y-%M-%d'})" size="30" /> <span class="Validform_checktip">请选择您的真实出生日期，用于证书发放。</span> </td> </tr> <tr> <td> <span class="redfont">*</span>学 历 </td> <td class="lefttd"> <select id="education" name="peBzzStudent.enumConstByFlagEducation.id" datatype="*" style="width: 175px;"> <option value=""> ---请选择学历--- </option> </select> <span class="Validform_checktip"></span> </td> </tr> <tr> <td width="50" rowspan="9" align="center" bgcolor="#f3f3f3"> 通讯信息 </td> <td> <span class="redfont">*</span>工作单位 </td> <td class="lefttd"> <input type="text" name="peBzzStudent.department" value="${peBzzStudent.department}" id="depart" class="inputxt" datatype="t4-25" errormsg="工作单位4-25个汉字、字母、下划线和数字！" maxlength="50" size="30" /> <span class="Validform_checktip">工作单位4-25个汉字、字母、下划线和数字</span> </td> </tr> <tr> <td> <span class="redfont"></span>职称职务 </td> <td class="lefttd"> <input type="text" ignore="ignore" name="peBzzStudent.position" value="${peBzzStudent.position}" id="position" class="inputxt" datatype="t2-15" errormsg="职称2-15个汉字、字母、下划线和数字！！" maxlength="30" size="30" /> <span class="Validform_checktip">职称2-15个汉字、字母、下划线和数字！</span> </td> </tr> <tr> <td> <span class="redfont">*</span>手 机 </td> <td class="lefttd"> <input type="text" name="peBzzStudent.mobilePhone" value="${peBzzStudent.mobilePhone}" onkeypress="KeyPress(this.value);" id="mobilePhone" class="inputxt mobile" datatype="m" errormsg="手机号为11位有效数字！" maxlength="30" size="30" /> <span class="Validform_checktip">请输入11位有效手机号，方便学习联系。</span> </td> </tr> <tr> <td> <span class="redfont">*</span>电 话 </td> <td class="lefttd"> <input type="text" name="peBzzStudent.phone" value="${peBzzStudent.phone}" id="phone" class="inputxt" datatype=
389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
