本文介绍了如何使用JavaScript进行表单验证，包括用户名、密码、确认密码、性别选择和爱好选择的验证方法。通过正则表达式检查用户名和密码格式，利用oninput和onblur事件实时检测输入，并对性别选择和个人描述字数进行有效性的判断。
-
首先进行表单的创建：验证时将后台设为# 将post方式变为get方式 设置一个总的检验函数在表单提交进行总校验
-
定义一个空的span块 用来显示错误提示
用 oninput 来检测输入用户名的格式 边检测边输入 也可以使用onblur 输入完成后再进行判断检测验证
调用checkUsername()函数进行检测 -
checkUsername()函数内容：通过document.getElementById来获取用户名的value值 (注意 这样返回的结果是String类型)
然后定义用户名的正则表达式 然后与用户名的value值进行匹配
匹配正确 空的span块输出 用户名规则正确✔
匹配错误 空的span块输出 用户名格式错误 -
密码与确认密码的检验：
密码检验的过程与用户名检验的过程类似 正则中额外添加数字 作为密码的正确格式；
确认密码时 通过获取两者的value 进行比较 根据结果 在空的块中显示结果提示 -
性别与爱好的选择提示：性别用单选框radio （注意 radio的name必须一致 否则 无法达到单选的效果）使用onmouseleave来进行选择检测，为此我们定义两个div块 来达到检测到未选择则选项 而鼠标离开此块 就进行选择结果的提示;
在进行性别勾选检测时 用document.getElementById来获取性别选项的checked属性
当且仅当两个性别选项全部为false 也就是两个选项都未选择的时候 我们会弹出未勾选提示
注意 在这里由于我们的条件是两者都未选择
因此这两个函数的返回值与其余检测项的返回值不同的是 这里我们返回的是条件的取反值,表示任意一个检测项有勾选就为true -
个人描述字数的检测：检测方式一样 oninput 边输入边检测，获取value值 trim去除空格 检测获取的长度 根据要求弹出提示
-
提交与重置：表单开始时我们定义了一个提交时检测所有的checkall函数，再次检测后 无不合格要求的进行提交 交给后台
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 表单标签 与后台进行数据交互
action： 填写后台地址
method： "post" 将请求参数放到请求体里面提交的 请求数据大小没有限制
"get" 会将请求参数拼接到URL中 ?后为请求参数，也就是表单项的键name与用户输入的值或者value值， 请求数据大小有限制
input表单项必须提供name属性 作为键
-->
<!-- checkAll()为true时，点击提交才会提交到后台 -->
<form action="#" method="get" onsubmit="return checkAll()">
<table border="1" cellspacing="0">
<tr>
<td>用户名：</td>
<td width="200px"><input type="text" name="username" id="inputusernameid" value="" onblur="checkUsername()" placeholder="请输入用户名" /></td>
<td width="300px">
<span id="spanUsername"></span>
</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password" id="psd" value="" placeholder="请输入密码8位密码" onblur="checkPassord()"/></td>
<td><span id="mima"></span><
最低0.47元/天 解锁文章
526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
