JS 表单验证

最新推荐文章于 2022-08-11 20:59:23 发布

原创最新推荐文章于 2022-08-11 20:59:23 发布 · 500 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#JS 表单验证

本文深入讲解表单验证的实现方式，包括使用JavaScript进行表单校验的代码示例，利用字符串方法和正则表达式进行格式校验的技术细节。

第七章表单验证

第一节表单校验

1.表单提交原理

使用submit按钮结合表单的onsubmit事件进行校验并提交数据

使用js代码进行校验，并通过表单的submit方法进行提交

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
  #d1
  {
  height:100px;
  width:100px;
	background:red;
  }
  </style>
  <script>
  function $(id)
  {
	return document.getElementById(id);
  }
  function check()
  {
	if ($("account").value=="")
	{
		alert("账号不能为空");
		return false;
	}
	if ($("pwd").value=="")
	{
		alert("密码不能为空");
		return false;
	}
	if ($("cpwd").value=="")
	{
		alert("确认密码不能为空");
		return false;
	}
	if ($("cpwd").value!=$("pwd").value)
	{
		alert("两次密码不一致");
		return false;
	}
	if ($("phone").value=="")
	{
		alert("手机号不能为空");
		return false;
	}
	return true;
  }
  function d1check()
  {
	  if(check())
	  {
		document.getElementById("regFrm").submit();
	  }
  }
  </script>
 </head>
 <body>
 <form id="regFrm" method="get" οnsubmit="return check()"/>
  账号：<input type="text" name="account" id="account"/><br/>
  密码：<input type="password" name="pwd" id="pwd"/><br/>
  确认密码：<input type="password" name="cpwd" id="cpwd"><br/>
  手机号：<input type="text" name="phone" id="phone"/>
  <br/>
  <input type="submit" value="提交"/>
  </form>
  <div id="d1" οnclick="d1check()"></div>
 </body>
</html>

2.用字符串方法进行表单校验

表单校验的内容：

非空校验：是否填写了内容
格式校验：长度是否在范围内，格式是否符合规则
存在性校验：数据在数据库服务器端是否已经存在

表单中的内容很多都是字符串，故可以使用字符串方法完成一些表单校验的功能，字符串的length属性通常用于校验字符串长度

如下是常用的字符串方法：

方法	说明
charAt	返回字符串中指定位置的字符
indexOf	返回子字符串在目标字符串中首次出现的位置，找不到则返回-1
substr	从指定位置开始截取指定长度的字符串例如 str.substr(数组下标,长度)
substring	返回指定索引范围内的字符串例如 str.substring(数组下标,数组下标)左闭右开
toLowerCase	返回字符串的小写格式
replace	使用新的字符串，替换目标字符串中的旧字符串 "hello".replace("h","g") 结果：gello
split	将目标字符串按照特定分隔符，分割成一个字符串数组
trim	去除字符串两边的空格

第二节正则表达式

正则表达式：定义一个规则去验证目标内容是否符合这个规则。用于字符串的校验，查找，替换。

//用RegEXP创建正则表达式对象
var reg=new RegEXP("表达式规则","配置参数")；
//通过字面量定义正则表达式对象
var reg=/表达式规则/配置参数；

//配置参数：
g：全局匹配 global
i: 忽略大小写匹配 ignorecase
m: 多行匹配 multiline

正则表达式的常用方法：

方法	说明
test	使用正则表达式匹配目标内容，若能匹配上，则返回true，否侧返回false
exec	使用正则表达式匹配目标内容，如果匹配上，则返回匹配的内容对象。返回对象包含内容的文本和位置。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
	var str="这是张三丰，那是张无忌";
	var reg=new RegExp("张三");
	alert(reg.test(str));
	var str1="Abcxxxabcxxxbc";
	var reg=/a?bc/ig;
	//alert(reg.exec(str1).index+"   "+reg.exec(str1).index);
	var res=reg.exec(str1);
	alert(res+"  "+res.index+" "+reg.lastIndex);
	res=reg.exec(str1);
	alert(res+"  "+res.index+" "+reg.lastIndex);
	res=reg.exec(str1);
	alert(res+"  "+res.index+" "+reg.lastIndex);
  </script>
 </head>
 <body>
  
 </body>
</html>