HTML---表单验证

���章目录

• 目录

  本章目标

  一.表单验证概述

  二.表单选择器

  属性过滤选择器 

   三.表单验证

   表单验证的方法

  总结

  ---

  本章目标

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

    ---

    一.表单验证概述

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

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

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

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

    二.表单选择器

            表单选择器示例              姓名:      
    
            性别:            男
                女
    
            兴趣爱好:            阅读
                旅行
                编程
    
                       $(document).ready(function(){  //选中标签id=myForm中所有的input、button，select，textarea元素 $("#myForm :input").css("background-color","aqua")   });    

    属性过滤选择器 

              前端表单示例               选择国家:          美国      中国      法国      德国        
    
            选择性别:    
            男
            女
    
             选择你感兴趣的运动:    
            足球
            篮球
            游泳
    
                 $(function(){//使用属性选择器selected选中标签select中选中的option并存贮在变量slist中var slist = $("#country :selcted");//使用each()函数遍历slist并调用函数slist.each(function(){使用html()函数编译选中的option标签并保存在变量message中var messsage = $(this).html();window.alert(message);});});  

     三.表单验证

     演示案例

            表单选择器示例              账号:      
    
            性别:            男
                女
    
            兴趣爱好:            阅读
                旅行
                编程
    
                       $(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