三.表单验证

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

一.表单验证概述

前端中的表单验证是在用户提交表单之前对用户输入的数据进行合法性检查的过程。

这种验证的目的是确保用户输入的数据符合预期的要求从而减少错误和无效的数据提交提高数据的质量和准确性。

输入类型的验证检查用户输入的数据是否符合预期的输入类型如文本、数字、邮箱、密码等。

必填字段的验证确保用户必须填写某些字段这些字段通常是表单中的关键信息。

日期和时间范围的验证检查用户输入的日期或时间是否在允许的范围内。

步长的验证对于某些需要递增或递减的输入字段如价格、评分等验证其步长是否符合要求。

字符长度的验证检查用户输入的字符长度是否在规定的范围内。

数值范围的验证检查用户输入的数值是否在允许的范围内。

正则表达式的验证使用正则表达式对用户输入的数据进行复杂的模式匹配和验证。

在前端中表单验证可以通过多种技术实现如HTML5的内置验证、JavaScript验证库如jQuery

Validation

Plugin以及自定义的JavaScript代码。

其中JavaScript是实现表单验证的常用工具之一它可以在数据被送往服务器前对HTML表单中的输入数据进行验证从而减轻服务器的负担并提高用户体验。

二.表单选择器

srcjq/jquery-3.7.1.js/scriptscript

typetext/javascript$(document).ready(function(){//选中标签idmyForm中所有的input、buttonselecttextarea元素$(#myForm

:input).css(background-color,aqua)

});/script

typetext/javascript$(function(){//使用属性选择器selected选中标签select中选中的option并存贮在变量slist中var

slist

:selcted);//使用each()函数遍历slist并调用函数slist.each(function(){使用html()函数编译选中的option标签并保存在变量message中var

messsage

$(this).html();window.alert(message);});});

/script

srcjq/jquery-3.7.1.js/scriptscript

typetext/javascript$(document).ready(function(){//点击表单中的提交按钮时调用函数$(#myForm).submit(function(){//

$(#myForm

:text)选中表单中的文本框并使用val()提取标签中的value值并储存在变量user中var

user

:text).val();//判断账号是否为空if(user){window.alert(账号不能为空);//结合当前方法并返回false的值return

false;}if(user.indexOf()-1){window.alert(User格式错误必须包含符号);return

false;}var

:password).val();//使用for循环遍历密码框中的每个字符for(var

i0;ipwd.length;i){//使用substring(i,i)函数提取i位置到i位置的数字不包含i1var

pwd.subtring(i,i);//使用isNaN(s)判断该变量是否为字符串if(isNaN(s)

false){window.alert(密码框内不允许出现数字);return

/html