当前位置:首页 > 开发 > Web前端 > 前端 > 正文

表单验证技术

发表于: 2014-11-11   作者:百合不是茶   来源:转载   浏览:
摘要: js最主要的功能就是验证表单,下面是我对表单验证的一些理解,贴出来与大家交流交流  ,数显我们要知道表单验证需要的技术点, String对象,事件,函数   一:String对象;通常是对字符串的操作;   1,String的属性;   字符串.length;表示该字符串的长度; var str= "java"

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>

 

 

 

 

表单验证技术

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="
常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记req
本片开始一下表单的验证内容。 比如我们要控制输入,不能空,不能过长,邮箱正确,密码强度等等。
原文地址:http://www.cnblogs.com/rohelm/archive/2014/10/19/4033513.html 常用的表单验证指令 1.
表单验证<AngularJs> 转载:http://www.cnblogs.com/rohelm/p/4033513.html 常用的表单验证指
在程序中使用表单验证基本上需要完成以下步骤: 在 web.config 文件中配置表单验证 配置 IIS 允许匿
AngularJS Form Validation 今天,我们来看看 Angular 是怎样帮我们做表单验证的。我们会集中讲怎么
最近在研究AngularJS,恰好遇到了表单验证问题。 没有那么多时间去写原创文章,恰好找到一篇不写得相
一个通用的表单验证组件,可以根据验证类型自行扩展,可以被动验证和主动验证。需要用到方法ParamUti
做网站的人都知道,一个form表单里面有很多控件,这些控件有的是必填项,那这必填项需要验证了。现在市
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号