纯JS实现表单验证实例

表单我实现了，input属性是text（文本框）、radio（单选按钮）、checkbox（多选按钮）的知识点，

fieldset标签（组合表单中的相关元素）、select标签（选择列表）和textarea标签（多行文本框）。

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; 
   
  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; 
} 
 
 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;} 
#nameprompt,#numprompt,#emailprompt{ 
  vertical-align:middle; 
  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=/^[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=/^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=/[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

以上所述是小编给大家介绍的纯JS实现表单验证实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！