纯js表单验证

最新推荐文章于 2024-04-30 08:58:14 发布

yingzizizizizizzz

最新推荐文章于 2024-04-30 08:58:14 发布

阅读量641

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/yingzizizizizizzz/article/details/53836138

版权

JS 专栏收录该内容

62 篇文章 2 订阅

订阅专栏

查了网上的一些资料，编写的表单验证。

这几天一直看书来着，这个小练习当练手了。

源代码：http://download.csdn.net/detail/yingzizizizizizzz/9719210

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

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

<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain" οnsubmit="return checkForm()">
	<h2>学生选课基本信息</h2>
	姓名：<input type="text" id="name" placeholder="yourname" size="20" οnfοcus="checkNameFocus()" οnblur="checkNameBlur()">
	<div id="namePrompt"></div><br/>
	学号：<input type="text" id="num" placeholder="yournum" size="20" οnfοcus="checkNumFocus()" οnblur="checkNumBlur()">
	<div id="numPrompt"></div><br/>
	性别：<label><input type="radio" name="sex" value="男" checked>男</label>
	      <label><input type="radio" name="sex" value="女">女<br/></label>
	邮箱：<input type="text" id="email" placeholder="yourmail" size="20" οnfοcus="checkEmailFocus()" οnblur="checkEmailBlur()">
	<div id="emailPrompt"></div>
	<br/>
	<fieldset class="classes" id="course" οnchange="checkCourse()">
		<legend>可选课程</legend>
		<label><input name="Class" type="checkbox" value="" />算法设计</label><br/>
		<label><input name="Class" type="checkbox" value="" />人工智能</label><br/>
		<label><input name="Class" type="checkbox" value="" />编译原理</label><br/>
		<label><input name="Class" type="checkbox" value="" />机器学习</label><br/>
		<label><input name="Class" type="checkbox" value="" />计算机网络</label>
	</fieldset>
	喜欢的老师：<select  name="teacher">
		<option value="0">刘老师</option>
		<option value="0">齐老师</option>
		<option value="0">李老师</option>
		<option value="0">马老师</option>
		<option value="0">肖老师</option>
	</select><br/>
	还有话说：<br/>
	<textarea id="message" name="message" 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])?

直接上代码：

// 通过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<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;
         }   
    }

下一步打算做利用ajax后台数据处理。未完待续。。。。。。