HTML---表单验证

文章目录

目录

本章目标

一.表单验证概述

二.表单选择器

属性过滤选择器

三.表单验证

表单验证的方法

总结

本章目标

掌握String对象的用法
会使用表单选择器的选择页面元素
会使用JQuery事件进行表单验证
Ajax的概念和作用

一.表单验证概述

前端中的表单验证是在用户提交表单之前，对用户输入的数据进行合法性检查的过程。这种验证的目的是确保用户输入的数据符合预期的要求，从而减少错误和无效的数据提交，提高数据的质量和准确性。

表单验证可以分为多种类型，包括但不限于：

输入类型的验证：检查用户输入的数据是否符合预期的输入类型，如文本、数字、邮箱、密码等。
必填字段的验证：确保用户必须填写某些字段，这些字段通常是表单中的关键信息。
日期和时间范围的验证：检查用户输入的日期或时间是否在允许的范围内。
步长的验证：对于某些需要递增或递减的输入字段，如价格、评分等，验证其步长是否符合要求。
字符长度的验证：检查用户输入的字符长度是否在规定的范围内。
数值范围的验证：检查用户输入的数值是否在允许的范围内。
正则表达式的验证：使用正则表达式对用户输入的数据进行复杂的模式匹配和验证。

在前端中，表单验证可以通过多种技术实现，如HTML5的内置验证、JavaScript验证库（如jQuery Validation Plugin）以及自定义的JavaScript代码。其中，JavaScript是实现表单验证的常用工具之一，它可以在数据被送往服务器前对HTML表单中的输入数据进行验证，从而减轻服务器的负担并提高用户体验。

二.表单选择器

<!DOCTYPE html>  
<html>  
<head>  
  <title>表单选择器示例</title>  
</head>  
<body>  
  <form id="myForm">  
    <label for="name">姓名:</label>  
    <input type="text" id="name" name="name"><br><br>  
  
    <label>性别:</label>  
    <input type="radio" id="male" name="gender" value="male">  
    <label for="male">男</label><br>  
    <input type="radio" id="female" name="gender" value="female">  
    <label for="female">女</label><br><br>  
  
    <label>兴趣爱好:</label>  
    <input type="checkbox" id="reading" name="hobby" value="reading">  
    <label for="reading">阅读</label><br>  
    <input type="checkbox" id="travel" name="hobby" value="travel">  
    <label for="travel">旅行</label><br>  
    <input type="checkbox" id="coding" name="hobby" value="coding">  
    <label for="coding">编程</label><br><br>  
  
    <input type="submit" value="提交">  
  </form> 
  <script src="jq/jquery-3.7.1.js"></script>
  <script type="text/javascript">
	  $(document).ready(function(){
		  //选中标签id=myForm中所有的input、button，select，textarea元素
		 $("#myForm :input").css("background-color","aqua") 
	  });
  </script>
</body>  
</html>

属性过滤选择器

<!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>  
  <!-- 下拉框 -->  
  <label for="country">选择国家:</label>  
  <select id="country" name="country">  
    <option value="usa">美国</option>  
    <option value="china">中国</option>  
    <option value="france">法国</option>  
    <option value="germany">德国</option>  
  </select>  
  <br><br>  
  <!-- 单选按钮 -->  
  <label>选择性别:</label>  
  <br>  
  <input type="radio" id="male" name="gender" value="male">  
  <label for="male">男</label><br>  
  <input type="radio" id="female" name="gender" value="female">  
  <label for="female">女</label><br>  
  <br>   
  <!-- 多选按钮 -->  
  <label>选择你感兴趣的运动:</label>  
  <br>  
  <input type="checkbox" id="football" name="sport" value="football">  
  <label for="football">足球</label><br>  
  <input type="checkbox" id="basketball" name="sport" value="basketball">  
  <label for="basketball">篮球</label><br>  
  <input type="checkbox" id="swimming" name="sport" value="swimming">  
  <label for="swimming">游泳</label><br>  
  <br>   
  <!-- 提交按钮 -->  
  <input type="submit" value="提交">  
</form>  
<script src="jq/jquery-3.7.1.js"></script>
<script type="text/javascript">
	$(function(){
		//使用属性选择器selected选中标签select中选中的option并存贮在变量slist中
		var slist = $("#country :selcted");
		//使用each()函数遍历slist并调用函数
		slist.each(function(){
			使用html()函数编译选中的option标签并保存在变量message中
			var messsage = $(this).html();
			window.alert(message);
		});
	});
</script>	
</body>  
</html>

三.表单验证

演示案例

<!DOCTYPE html>  
<html>  
<head>  
  <title>表单选择器示例</title>  
</head>  
<body>  
  <form id="myForm">  
    <label for="name">账号:</label>  
    <input type="text" id="name" name="name" value=""><br><br>  
  
    <label>性别:</label>  
    <input type="radio" id="male" name="gender" value="male">  
    <label for="male">男</label><br>  
    <input type="radio" id="female" name="gender" value="female">  
    <label for="female">女</label><br><br>  
  
    <label>兴趣爱好:</label>  
    <input type="checkbox" id="reading" name="hobby" value="reading">  
    <label for="reading">阅读</label><br>  
    <input type="checkbox" id="travel" name="hobby" value="travel">  
    <label for="travel">旅行</label><br>  
    <input type="checkbox" id="coding" name="hobby" value="coding">  
    <label for="coding">编程</label><br><br>  
  
    <input type="submit" value="提交">  
  </form> 
  <script src="jq/jquery-3.7.1.js"></script>
  <script type="text/javascript">
	  $(document).ready(function(){
		  //点击表单中的提交按钮时调用函数
		  $("#myForm").submit(function(){
		      // $("#myForm :text")选中表单中的文本框并使用val()提取标签中的value值并储存在变量user中
			  var user = $("#myForm :text").val();
			  //判断账号是否为空
			  if(user==""){
				  window.alert("账号不能为空！");
				  //结合当前方法并返回false的值
				  return false;
			  }
			  if(user.indexOf("@")==-1){
				  window.alert("User格式错误，必须包含@符号");
				  return false;
			  }
               var pwd = $("#myForm :password").val();
			  //使用for循环遍历密码框中的每个字符
			  for(var i=0;i<pwd.length;i++){
				  //使用substring(i,i++)函数提取i位置到i+位置的数字不包含i+1
				  var s = pwd.subtring(i,i++);
				  //使用isNaN(s)判断该变量是否为字符串
				  if(isNaN(s) == false){
					  window.alert("密码框内不允许出现数字");
					  return false;
				  }
		  });
	  });
  </script>
  
</body>  
</html>