东莞企业建站程序,网站开发与管理心得体会,百度网盘0基础网站开发教程,类似于众人帮的做任务赚佣金网站文章目录 目录 本章目标 一.表单验证概述 二.表单选择器 属性过滤选择器 三.表单验证 表单验证的方法 总结 本章目标
掌握String对象的用法会使用表单选择器的选择页面元素会使用JQuery事件进行表单验证Ajax的概念和作用 一.表单验证概述
前端中的表单验证是在用户提交表…文章目录 目录 本章目标 一.表单验证概述 二.表单选择器 属性过滤选择器 三.表单验证 表单验证的方法 总结 本章目标
掌握String对象的用法会使用表单选择器的选择页面元素会使用JQuery事件进行表单验证Ajax的概念和作用 一.表单验证概述
前端中的表单验证是在用户提交表单之前对用户输入的数据进行合法性检查的过程。这种验证的目的是确保用户输入的数据符合预期的要求从而减少错误和无效的数据提交提高数据的质量和准确性。
表单验证可以分为多种类型包括但不限于
输入类型的验证检查用户输入的数据是否符合预期的输入类型如文本、数字、邮箱、密码等。必填字段的验证确保用户必须填写某些字段这些字段通常是表单中的关键信息。日期和时间范围的验证检查用户输入的日期或时间是否在允许的范围内。步长的验证对于某些需要递增或递减的输入字段如价格、评分等验证其步长是否符合要求。字符长度的验证检查用户输入的字符长度是否在规定的范围内。数值范围的验证检查用户输入的数值是否在允许的范围内。正则表达式的验证使用正则表达式对用户输入的数据进行复杂的模式匹配和验证。
在前端中表单验证可以通过多种技术实现如HTML5的内置验证、JavaScript验证库如jQuery Validation Plugin以及自定义的JavaScript代码。其中JavaScript是实现表单验证的常用工具之一它可以在数据被送往服务器前对HTML表单中的输入数据进行验证从而减轻服务器的负担并提高用户体验。
二.表单选择器 !DOCTYPE html
html
head title表单选择器示例/title
/head
body form idmyForm label forname姓名:/label input typetext idname namenamebrbr label性别:/label input typeradio idmale namegender valuemale label formale男/labelbr input typeradio idfemale namegender valuefemale label forfemale女/labelbrbr label兴趣爱好:/label input typecheckbox idreading namehobby valuereading label forreading阅读/labelbr input typecheckbox idtravel namehobby valuetravel label fortravel旅行/labelbr input typecheckbox idcoding namehobby valuecoding label forcoding编程/labelbrbr input typesubmit value提交 /form script srcjq/jquery-3.7.1.js/scriptscript typetext/javascript$(document).ready(function(){//选中标签idmyForm中所有的input、buttonselecttextarea元素$(#myForm :input).css(background-color,aqua) });/script
/body
/html 属性过滤选择器 !DOCTYPE html
html langen
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
title前端表单示例/title
/head
body
form !-- 下拉框 -- label forcountry选择国家:/label select idcountry namecountry option valueusa美国/option option valuechina中国/option option valuefrance法国/option option valuegermany德国/option /select brbr !-- 单选按钮 -- label选择性别:/label br input typeradio idmale namegender valuemale label formale男/labelbr input typeradio idfemale namegender valuefemale label forfemale女/labelbr br !-- 多选按钮 -- label选择你感兴趣的运动:/label br input typecheckbox idfootball namesport valuefootball label forfootball足球/labelbr input typecheckbox idbasketball namesport valuebasketball label forbasketball篮球/labelbr input typecheckbox idswimming namesport valueswimming label forswimming游泳/labelbr br !-- 提交按钮 -- input typesubmit value提交
/form
script srcjq/jquery-3.7.1.js/script
script typetext/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 idmyForm label forname账号:/label input typetext idname namename valuebrbr label性别:/label input typeradio idmale namegender valuemale label formale男/labelbr input typeradio idfemale namegender valuefemale label forfemale女/labelbrbr label兴趣爱好:/label input typecheckbox idreading namehobby valuereading label forreading阅读/labelbr input typecheckbox idtravel namehobby valuetravel label fortravel旅行/labelbr input typecheckbox idcoding namehobby valuecoding label forcoding编程/labelbrbr input typesubmit value提交 /form script srcjq/jquery-3.7.1.js/scriptscript typetext/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 i0;ipwd.length;i){//使用substring(i,i)函数提取i位置到i位置的数字不包含i1var s pwd.subtring(i,i);//使用isNaN(s)判断该变量是否为字符串if(isNaN(s) false){window.alert(密码框内不允许出现数字);return false;}});});/script/body
/html 表单验证的方法 总结
