JavaScript【表单验证1】

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

一直在冬眠

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

阅读量624

点赞数

分类专栏： JavaScript/JQuery 文章标签： javascript function input button html

本文链接：https://blog.csdn.net/wjr_loves/article/details/7865493

版权

JavaScript/JQuery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

JavaScript代码：

<script type="text/javascript">
 //判断是否为空
 function textIsNull(obj) {
     if (obj.value.length > 0)
         return true;
     else
         return false;
 } 
 //判断姓名是否符合
 function textName(obj){
  var tiaojian =/^[a-z0-9]+$/;
  if(tiaojian.test(obj.value))
    return true;
  else
   return false;
 } 
 //判断密码长度
 function textLength(obj,min,max){
  if(isNaN(min)){
   min=0; 
  }
  if(isNaN(max)){
   max=obj.value.length; 
  }
  if(obj.value.length >= min && obj.value.length <= max)
   return true;
  else
   return false;
 }
 //判断密码输入是否一致
 function pwdIsSame(obj1,obj2){
  if(obj1.value == obj2.value)
   return true;
  else 
   return false;
 }
 function panduan1(){
  if(textIsNull(document.getElementById("name")) == false){
   document.getElementById("show1").style.display="block";
   document.getElementById("show1").style.display="inline";
  }else if(textIsNull(document.getElementById("name")) == true)
  {
   document.getElementById("show1").style.display="none";
  }
  if(textName(document.getElementById("name")) == false){
   document.getElementById("show2").style.display="block";
   document.getElementById("show2").style.display="inline";
  }else if(textName(document.getElementById("name")) == true){
   document.getElementById("show2").style.display="none";
  }
 }
 function panduan2(){
  if(textIsNull(document.getElementById("pwd")) == false){
   document.getElementById("show3").style.display="block";
   document.getElementById("show3").style.display="inline";
  }else if(textIsNull(document.getElementById("pwd")) == true){
   document.getElementById("show3").style.display="none";
  }
  if(textLength(document.getElementById("pwd"),6,24) == false){
   document.getElementById("show4").style.display="block";
   document.getElementById("show4").style.display="inline";
  }else if(textLength(document.getElementById("pwd"),6,24) == true){
   document.getElementById("show4").style.display="none";
  }
 }
 function panduan3(){
  if(pwdIsSame(document.getElementById("pwd"),document.getElementById("pwd2")) == false){
   document.getElementById("show5").style.display="block";
   document.getElementById("show5").style.display="inline";
  }else if(pwdIsSame(document.getElementById("pwd"),document.getElementById("pwd2")) == true){
   document.getElementById("show5").style.display="none";
  }
 }
 function init(){
  document.getElementById("name").οnblur=panduan1;
  document.getElementById("pwd").οnblur=panduan2;
  document.getElementById("pwd2").οnblur=panduan3;
 }
</script>

HTML代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证</title>
<style type="text/css">
	input{ width:120px;}
</style>
</head>
<body οnlοad="init()">
姓        名：<input type="text" id="name" value="" />
<div id="show1" style="display:inline;color:#F00; display:none; font-size:13px">姓名不能为空</div>
<div id="show2" style="display:inline;color:#F00; display:none; font-size:13px">必须是a-z、0-9和下划线</div><br />
密        码：<input type="password" id="pwd" value="" />
<div id="show3" style="display:inline;color:#F00; display:none; font-size:13px">密码不能为空</div>
<div id="show4" style="display:inline; color:#F00; display:none; font-size:13px">密码不能小于6位</div><br />
确认密码：<input type="password" id="pwd2" value="" />
<div id="show5" style="display:inline; color:#F00; display:none; font-size:13px">密码输入不一致</div><br />
<input type="button" id="queren" value="确认" />
</body>
</html>

一直在冬眠

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript【表单验证1】

JavaScript代码： //判断是否为空 function textIsNull(obj) { if (obj.value.length > 0) return true; else return false; } //判断姓名是否符合 function textName(obj){ var tiaojian =/^[
复制链接

扫一扫

专栏目录