javascript基础编程应用表单验证

最新推荐文章于 2022-08-18 16:22:30 发布

JYLM

最新推荐文章于 2022-08-18 16:22:30 发布

阅读量358

点赞数 1

本文链接：https://blog.csdn.net/m0_37905429/article/details/70216091

版权

用javascript编程简单实现表单验证的功能。

对应的HTML元素和设计网页如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表单验证</title>
<script src="js4.js" type="text/javascript" ></script>
<style type="text/css">
<!--
.STYLE4 {font-size: 18px}
-->
</style>
</head>

<body>
<form action="js1.html" method="post" οnsubmit="return submit1()">
  <table width="337" border="2" align="center">
    <tr>
      <td colspan="2" align="center"><span class="STYLE4">会员注册</span></td>
    </tr>
    <tr>
      <td width="91"><span class="STYLE4">用户名：</span></td>
      <td width="228" ><input id="input1" type="text" name="name" value="aaa" οnblur="checkname()"/><span id="span1" class="STYLE4">请输入6-10位长度</span></td>
    </tr>
    <tr>
      <td><span class="STYLE4">密码：</span></td>
      <td><input id="pwd1" type="text" name="pwd"οnblur="checkpwd1()" value=""/><span id="pwds1">密码6-10位数字组成</span></td>
    </tr>
    <tr>
      <td><span class="STYLE4">确认密码：</span></td>
      <td><input type="text" name="pwd2"  id="pwd2" value="" οnblur="checkpwd2()"/><span id="pwds2">请输入的密码与上面的密码一致</span></td>
    </tr>
    <tr>
      <td><span class="STYLE4">年龄：</span></td>
      <td><input type="text" name="age" /></td>
    </tr>
    <tr>
      <td><span class="STYLE4">邮箱：</span></td>
      <td><input  id="input2"type="text" name="add" value="" οnblur="checkadd()" /><span id="spanadd"></span></td>
    </tr>
    <tr>
      <td><span class="STYLE4">性别：</span></td>
      <td><input type="radio" name="sex" value="radiobutton" />
        <span class="STYLE4">男</span> 
        <input type="radio" name="sex" value="radiobutton" />
          <span class="STYLE4">女</span></td>
    </tr>
    <tr>
      <td height="65" colspan="2"><input name="in" type="submit" value="提交" />
        <input name="Input" type="reset" value="重置"/></td>
    </tr>
  </table>
</form>
</body>
</html>

对应的.js代码为：

function $(id){//封装document.getElementById(id)方法
	return document.getElementById(id);
	
	}
var m1=false,m2=false,m3=false,m4=false;
//验证name框里的值是否合法
 function checkname(){
	var b1=$("input1").value;
//验证用户名的正则表达式
 var zb=/^[a-zA-Z0-9_]{6,10}$/;
	if(zb.test(b1)){//使用test（）函数验证
		//var s1="恭喜你，用户名可以使用";
		$("span1").innerHTML='<font color="green">恭喜你，用户名可以使用</font>';//可以改变span中内嵌的内容和字体的颜色
		m1=true;
		
		}
		else{
			//var s2="请重新输入";
		$("span1").innerHTML='<font color="red">请重新输入</font>';
		$("input1").value="";//将输入框置空
		m1=false;
			}
}
function checkpwd1(){
	var p1=$("pwd1").value;
	var zb=/^[0-9]{6,10}$/;
	if(zb.test(p1)){
	$("pwds1").innerHTML='<font color="green">密码符合</font>';
	m2=true;
	}else{
		$("pwds1").innerHTML='<font color="red">密码不符合，重新输入</font>';
		$("pwd1").value="";
		m2=false;
		}
	}
	function checkpwd2(){
//确认两次输入密码是否一致
 var p1=$("pwd1").value;
		var p2=$("pwd2").value;
		if(p1==p2){
			$("pwds1").innerHTML='<font color="green">√</font>';
			$("pwds2").innerHTML='<font color="green">√</font>';
			m3=true;
			}else{
				$("pwds1").innerHTML='<font color="red">×</font>';
				$("pwds2").innerHTML='<font color="green">×请再次输入</font>';
				m3=false;
				
				}
			
		
		}
		function checkadd(){
			var b1=$("input2").value;
	var zb=/^[a-zA-Z0-9_]{1,10}[@][a-zA-Z0-9]{1,255}(.cn|.com|.net)$/;
	if(zb.test(b1)){
		//var s1="恭喜你，用户名可以使用";
		$("spanadd").innerHTML='<font color="green">恭喜你，邮箱可以使用</font>';
		m4=true;
		}
		else{
			//var s2="请重新输入";
		$("spanadd").innerHTML='<font color="red">请重新输入</font>';
		$("input2").value="";
		m4=false;
			}
			
			
			}
		function submit1(){
			return m1&&m2&&m3&&m4;//表单在被提交时执行的事件，返回true可提交，可通过设置标志量，当前面的验证都返回true是可提交
			
			}

使用onblur离开焦点触发事件。其中事件执行.js中定义的函数.

运行后的截图为：