表单验证技术

最新推荐文章于 2020-06-21 13:41:05 发布

最新推荐文章于 2020-06-21 13:41:05 发布 · 190 阅读

文章标签：

#JavaScript #String对象 #DOM对象 #事件 #ViewUI

JavaScript基础专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用JavaScript进行表单验证的方法，并提供了详细的代码示例。文章首先讲解了String对象的基本操作，随后介绍了表单验证中常用的事件、方法和属性。最后，作者通过一个完整的表单验证案例展示了如何综合运用这些技术点。

js最主要的功能就是验证表单,下面是我对表单验证的一些理解,贴出来与大家交流交流 ,数显我们要知道表单验证需要的技术点, String对象,事件,函数

一:String对象;通常是对字符串的操作;

1,String的属性;

    字符串.length;表示该字符串的长度;
   var str= "java";
   var len = str.length;

len的结果是4;

2,字符串对象常用的方法;

   格式:字符串.方法名();

字符串常用的方法;

toLowerCase() 将字符串转为小写
toUpperCase()  将字符串转为大写
charAt(index)     返回指定位置的字符
indexOf(字符串,index)  查找指定位置的字符在字符串中第一次出现的位置
substring(index1,index2) 截取两者之间的内容,包括index1  不包括index2

2,表单验证常用的事件,方法,属性

事件

onblur失去焦点触发
onfocus获得焦点时触发
onkeypress按键按下时触发
onclick 点击时触发

方法;

blur 从文本中移开
focus 焦点
select 选取文本区域内容

属性;

id 设置或返回id
value 设置或返回文本域的值

3,innerHTML属性;

设置提示信息;

4,DOM对象;

通过标签名查找 HTML 元素

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

5,综合运用上述的技术点做一个简单的表单验证

思路:

a,使用html制作form表格,及内容
b,使用dom获取元素
c,通过时间触发函数

代码完整实现:正则表达式有些检测不出来

<html>
<head>
<style type="text/css">
table{
width:80%;
height:300px;
}


.float_right{
  text-align:right;
  color:#0000ff;
  font-size:14px;
  font-weight:bold;
}
form div{float:left;position:relative}
form input{float:left}

</style>

<script type="text/JavaScript">
  //输入框中的提示
  function fun_zhuce(element){
		if(element.value=='全站唯一' || element.value=='正确的邮箱'){
				element.value='';
		}
  }
  
  //用户名的验证
  function fun_tishiuser(){
      //获取输入框的属性
       var element = document.getElementById('userName'); 
	   //获取文本提示属性
	   var userinner = document.getElementById('innerclass');
	   //判断输入框的值是否为null
	   if(element.value==''){
	       element.value='全站唯一';
		   userinner.innerHTML="<span style='color:#cc0000'>必须输入账号!!</span>";
	   }else{
		   if(element.value.match('\\w{6,12}')){
		     userinner.innerHTML='账号格式正确!!';
		   }else{
		     userinner.innerHTML='账号必须是字母,数字,下划线 6~12位 !!';
		   }
	   }
  }
  
  //密码验证
  function fun_pwd(){
     var pwd = document.getElementById("pwd").value;
     //获取文本提示属性
	   var innerpwd = document.getElementById('innerpwd');
	   //判断是否为空
     if(pwd==''){
	     innerpwd.innerHTML="密码不能为空!!";
	 }else{
	   if(pwd.match('\\w{6,12}')){
		 innerpwd.innerHTML="密码格式正确";
		}else{
		 innerpwd.innerHTML="密码只能是下划线,字母,数字组成";
		}
	 } 
  }
  
  //密码确认
  function  fun_pwd2(){
  //获取密码和确认密码
    var pwd = document.getElementById("pwd").value;
	var pwd2 = document.getElementById("pwd2").value;
	//获取文本提示属性
	 var innerpwd2 = document.getElementById('innerpwd2');
	 
      if(pwd==pwd2){
	     innerpwd2.innerHTML="正确"
	  }else{
	     innerpwd2.innerHTML="密码不相等"
	  }
  }
  
  //邮箱验证
  function fun_email(){
	var email = document.getElementById("email").value;
	var inneremail = document.getElementById("inneremail");
	
	if(email==''){
	    inneremail.innerHTML='邮箱不能为空';
	}else{
	    if( email.match('[a-zA-Z1-9][\\w]{3,8}\\@[\\w]+\\.[\\w]{2,5}\\.*[\\w]*')){
		inneremail.innerHTML='邮箱格式正确!!';
		}else{
		inneremail.innerHTML='邮箱格式不正确!!';
		}
	}
  }
  
</script>
</head>

<body  >
    <form action="secu.html" action="post">
	<caption><h2>注册</h2></caption>
	<table border=1px color="ff00000"  cellspacing="0px" cellpadding="0px"  >
	<tr>
	   <td class="float_right" width=30%>账号:</td>
	   <td> <input type="text" name="userName" id="userName" value="全站唯一" onclick="fun_zhuce(this)"  onblur="fun_tishiuser()">
	   <div id="innerclass"></div>
	   </td>
	    
	</tr>
		<tr>
	   <td class="float_right" > 密码:</td>
	   <td><input type=""password" name="pwd" id="pwd" onblur="fun_pwd()"> 
	    <div id="innerpwd"></div>
		</td>
	</tr>
		<tr>
	   <td class="float_right" >确认密码:</td>
	   <td> <input type=""password" name="pwd2" id="pwd2" onblur="fun_pwd2()">
	   <div id="innerpwd2"></div>
	   </td>
	</tr>
		<tr>
	   <td class="float_right">邮箱:</td>
	   <td> <input type="text" name="email" id="email" value="正确的邮箱"  onclick="fun_zhuce(this)"  onblur="fun_email()">
	   <div id="inneremail"></div>
	   </td>
	</tr>
	<tr>
	<td colspan=2 align="center"><input type="submit"  value="提交"  /></td>
	</tr>
	</table>
	</form>
</body>
</html>