表单验证的实现方法

最新推荐文章于 2024-07-26 20:46:33 发布

n34886746

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量8.5k

点赞数 8

文章标签： javascript css js

本文链接：https://blog.csdn.net/n34886746/article/details/106470592

版权

简单的表单验证

A.两种验证方式：
1.在表单提交时进行验证，sumbit时
2.在表单控件失去焦点时进行验证
表单验证逻辑一般写在表单提交之前，html5也新增了表单验证形式，表单验证可以使用正则表达式
B.表单验证一些必需的验证项目：
1.用户是否填写表单中必填项目
2.用户是否已经输入合法的日期
3.用户是否已经输入合法的邮件地址
4.用户是否已经在数据域（numeric field）中输入合法的文本
等等
C.如果表单相应的项目并没有填好的话，那么我们需要弹出一个警示框。有以下几种情况：1.用户此行内容未填写，想跳过此行，先去填写下面的内容，需要在表单提交时，提醒用户有表单未填写完毕，不能被提交，并将光标移至相应处2.此行内容未填写完毕，不能跳过，光标不能移动，此种方式交互性能不是特别好，不推荐使用
下面是一个简单的数字名用户表单验证：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单表单验证</title>
</head>
<body>
   <form action="#">
   		<table>
   				<tr>
   					<td>姓名：</td>
   					<td><input type="text" name="txtName" id="textName" placeholder="文本不能少于6个数字"></td>
   				</tr>
   				<tr>
   				  <td colspan="2">
   				  <input type="submit" value="提交">
   				  <input type="reset" value="重置">
   				  </td>
   				</tr>
   		</table>
   </form> 
   <script>
   			window.οnlοad=function(){
   			//先拿到我们的表单
   			var frm=document.forms[0];
   			//用户名的长度如果发生错误，我们要在该行内容后面给其加一个内容，提示用户填写错误，并把相应的错误内容框加红
   			var textNameMag=document.createElement('span');
   			textNameMag.innerHTML="姓名的长度必须在6到15个数字之间";
   			textNameMag.style.color="red";
//在表单进行提交时，必须要进行验证
frm.οnsubmit=function(e){
//获取文本框的内容
var txtContent=document.getElementById('textName');
//写一个正则表达式，你填入的数字必须在6到15之间
var txtContentRegExp=/\w{6,15}/gi;
if(txtContentRegExp.test(txtContent.value)){
//此处成功，删除我们错误的文本消息框
txtContent.parentNode.removeChild(textNameMag);
return true;
}else{
//检验失败，用户填入的文本不符合要求
txtContent.parentNode.appendChild(textNameMag);return false;
}
   			}
   			}
   </script>
</body>
</html>