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+1var s = pwd.subtring(i,i++);//使用isNaN(s)判断该变量是否为字符串if(isNaN(s) == false){window.alert("密码框内不允许出现数字");return false;}});});</script></body>  
</html>