表单我实现了，input属性是text（文本框）、radio（单选按钮）、checkbox（多选按钮）的知识点，
fieldset标签（组合表单中的相关元素）、select标签（选择列表）和textarea标签（多行文本框）。
<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain" onsubmit="return checkForm()"> <h2>学生选课基本信息</h2> 姓名：<input type="text" placeholder="yourname" size="20" onfocus="checkNameFocus()" onblur="checkNameBlur()"> <div></div><br/> 学号：<input type="text" placeholder="yournum" size="20" onfocus="checkNumFocus()" onblur="checkNumBlur()"> <div></div><br/> 性别：<label><input type="radio" value="男" checked>男</label> <label><input type="radio" value="女">女<br/></label> 邮箱：<input type="text" placeholder="yourmail" size="20" onfocus="checkEmailFocus()" onblur="checkEmailBlur()"> <div></div> <br/> <fieldset onchange="checkCourse()"> <legend>可选课程</legend> <label><input type="checkbox" value="" />算法设计</label><br/> <label><input type="checkbox" value="" />人工智能</label><br/> <label><input type="checkbox" value="" />编译原理</label><br/> <label><input type="checkbox" value="" />机器学习</label><br/> <label><input type="checkbox" value="" />计算机网络</label> </fieldset> 喜欢的老师：<select> <option value="0">刘老师</option> <option value="0">齐老师</option> <option value="0">李老师</option> <option value="0">马老师</option> <option value="0">肖老师</option> </select><br/> 还有话说：<br/> <textarea placeholder="Your Message to Us" cols="50" rows="10"></textarea> <br/><br/> <button type="submit">提交</button> <button type="reset">重置</button> </form>
css样式如下图：
css这部分写的不太好，请大家批评指正。（参考的网上的一些资料，网址忘了）
*{ margin-left:auto; margin-right:auto; max-width: 500px; background: #F8F8F8; padding: 10px; font: 12px Arial, Helvetica, sans-serif; color: #666; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } body,form{ padding: 15px; /*width: 500px;*/ background: #F4F4F4; } h2 { padding-bottom:2px; *padding:0; font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif; padding: 20px 0px 20px 40px; display: block; margin: -30px -30px 10px -30px; color: #FFF; background: #9DC45F; text-shadow: 1px 1px 1px #949494; border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; border-bottom:1px solid #89AF4C; } /*label { display: block; margin: 0px 0px 0px; }*/ select { color: #555; height: 30px; line-height:12px; width: 30%; padding: 0px 0px 0px 10px; margin-top: 2px; border: 1px solid #E5E5E5; background: #FBFBFB; outline: 0; -webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2); box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2); font: normal 12px/12px Arial, Helvetica, sans-serif; } .classes input{ vertical-align:middle; margin-top:-2px; margin-bottom:1px; height: 35px; } textarea{ height:100px; width: 90%; padding-top: 10px; } button { background-color: #9DC45F; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-border-radius: 5px; border:none; padding: 10px 25px 10px 25px; color: #FFF; text-shadow: 1px 1px 1px #949494; } button:hover { background-color:#80A24A; } #name,#num,#email{vertical-align:middle;}/*input和图片在一行*/ #namePrompt,#numPrompt,#emailPrompt{ vertical-align:middle;/*input和图片在一行*/ display: inline-block; padding: 0px; color: red; background-color:#F4F4F4; } /*验证表单的格式*/ /*当鼠标放到文本框时，提示文本的样式*/ .import_prompt{ border:solid 1px #ffcd00; background-color:#ffffda; } 下来就是js表单验证了。。。。。。 这是js验证的目标。 1.当鼠标放在姓名文本框时，提示文本及样式。 2./*当鼠标离开姓名文本框时，提示文本及样式*/ 汉字 3.当鼠标放在学号文本框时，提示文本及样式。 4./*当鼠标离开学号文本框时，提示文本及样式*/只能是数字 5.邮箱的验证，必须符合邮箱的格式。 6.表单提交时验证表单内容输入的有效性。 其中用到了正则表达式来匹配。 匹配简体中文的正则是^[\u4e00-\u9fa5]+$ 匹配邮箱格式的正则是 [\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])? 直接上代码： [javascript] view plain copy 在CODE上查看代码片派生到我的代码片 // 通过getElementById得到相应元素 function $(id){ return document.getElementById(id); } // 当鼠标放在姓名文本框时，提示文本及样式。 function checkNameFocus(){ var userNameId=$("name"); userNameId.className="import_prompt"; var namePrompt=$("namePrompt"); namePrompt.innerHTML="必须是汉字哦~"; } /*当鼠标离开姓名文本框时，提示文本及样式*/ function checkNameBlur(){ var namePrompt=$("namePrompt"); namePrompt.innerHTML=null; var reg1=https://www.jb51.net/^[\u4e00-\u9fa5]+$/;//匹配简体中文的正则表达式 var name=$("name").value; // 先查看是否为空 if(name==""){ namePrompt.innerHTML="名字不能为空！" return false; } else if(!reg1.test(name)){ var trueimg=document.createElement("img"); trueimg.src="./formimages/false.png"; trueimg.width="15"; namePrompt.appendChild(trueimg); return false; }else{ var trueimg=document.createElement("img"); trueimg.src="./formimages/true.png"; trueimg.width="15"; namePrompt.appendChild(trueimg); return true; } } //当鼠标放在学号文本框时，提示文本及样式。 function checkNumFocus(){ var studentNum=$("num"); studentNum.className="import_prompt"; var numPrompt=$("numPrompt"); numPrompt.innerHTML="必须是0-9的10位数字哦~"; } /*当鼠标离开学号文本框时，提示文本及样式*/ function checkNumBlur(){ var numPrompt=$("numPrompt"); numPrompt.innerHTML=null; var reg2=https://www.jb51.net/^\d{10}$/; var xuehao=$("num").value; //先验证是否为空 if(xuehao==""){ numPrompt.innerHTML="学号不能为空！"; return false; } else if(!reg2.test($("num").value)){//好奇怪，使用变量就变成空的了，在外边就有值。 var trueimg=document.createElement("img"); trueimg.src="./formimages/false.png"; trueimg.width="15"; numPrompt.appendChild(trueimg); return false; } else{ var trueimg=document.createElement("img"); trueimg.src="./formimages/true.png"; trueimg.width="15"; numPrompt.appendChild(trueimg); return true; } } //邮箱的验证，必须符合邮箱的格式。 function checkEmailFocus(){ var email=$("email"); email.className="import_prompt"; var emailPrompt=$("emailPrompt"); emailPrompt.innerHTML="请输入您常用的电子邮箱"; } function checkEmailBlur(){ var emailPro=$("emailPrompt");; emailPrompt.innerHTML=null; var emailValue=$("email").value; var reg3=https://www.jb51.net/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/; //先验证是否为空 if(emailValue==""){ emailPrompt.innerHTML="邮箱不能为空！"; return false; } else if(!reg3.test(emailValue)){ var trueimg=document.createElement("img"); trueimg.src="./formimages/false.png"; trueimg.width="15"; emailPrompt.appendChild(trueimg); return false; } else{ var trueimg=document.createElement("img"); trueimg.src="./formimages/true.png"; trueimg.width="15"; emailPrompt.appendChild(trueimg); return true; } } //验证复选框 function checkCourse(){ var courses=$("course"); var cbs = courses.getElementsByTagName("input"); var b = false; for(var i=0;i<cbs.length;i++){ if(cbs[i].type == "checkbox" && cbs[i].checked){ b = true; } } if(!b){ alert("请至少选择一门课程！！！"); return false; } } //表单提交时验证表单内容输入的有效性 function checkForm(){ var flagName=checkNameBlur(); var flagNum=checkNumBlur(); var flagEmail=checkEmailBlur(); var flagCourse=checkCourse(); if(flagName==true &&flagNum==true &&flagEmail==true &&flagCourse==true){ return true; } else{ return false; } }