0
0

JavaScript表单验证

表单验证概念

表单验证是javascript中高级选项之一

JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证

被 JavaScript验证的这些典型的表单数据有：

  1. 用户是否已填写表单中的必填项目？
  2. 用户输入的邮件地址是否合法
  3. 用户是否在输入框中输入了文本

如下图所示：

表单的非空判断

即表单里面所展示的控件的值不能为空 例如以下代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         span {
  8.             color: red;
  9.             font-weight: bold;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14. <form action="" id="myForm">
  15.     <p>名字: <input type="text" id="userName" onkeyup="checkName()"><span id="l1"></span></p>
  16.     <p>密码: <input type="text" id="userPwd" onkeyup="checkPwd()"><span id="l2"></span></p>
  17.     <p>
  18.         <button>登录</button>
  19.     </p>
  20. </form>
  21. <script>
  22.     //用来检查名字是否合规
  23.     function checkName() {
  24.         var length = userName.value.length
  25.         if (length > 0) {//里面有内容
  26.             //名字的大小应该在 3-6 之间
  27.             if (length >= 3 && length <= 6) {
  28.                 l1.textContent = "😊"
  29.                 return true
  30.             }
  31.             //不在区间之内
  32.             l1.textContent = "长度必须在3-6之间"
  33.             return false
  34.         }
  35.         //里面没有内容
  36.         l1.textContent = "用户名不能为空"
  37.         return false
  38.     }
  40.     //用来检查密码是否合规
  41.     function checkPwd() {
  42.         var length = userPwd.value.length
  43.         if (length > 0) {//里面有内容
  44.             //名字的大小应该在 3-6 之间
  45.             if (length >= 3 && length <= 6) {
  46.                 l2.textContent = "😊"
  47.                 return true
  48.             }
  49.             //不在区间之内
  50.             l2.textContent = "长度必须在3-6之间"
  51.             return false
  52.         }
  53.         //里面没有内容
  54.         l2.textContent = "密码不能为空"
  55.         return false
  56.     }
  57.     //添加提交事件(会具备返回值)
  58.     myForm.onsubmit = () => {
  59.         //阻止表单的提交  需要返回 false
  60.         return checkName()&&checkPwd()
  61.     }
  62. </script>
  63. </body>
  64. </html>

效果图如下：

** 注:在表单验证中需要键盘事件**

onkeyup :某个键盘按键被松开时触发

onkeydown：某个键盘按键被按下时触发

onkeypress：某个键盘被按下时触发 但是它不识别功能键（shift，ctrl等等）

正则表达式

使用正则表达式可以使代码变简洁并且可以严谨的验证文本框中的内容

那么 现在让我们回忆一下正则表达式

正则的规则

内容：

\d 数字[0-9] \D非数字^[0-9]

\w数字+英文+下划线[0-9a-zA-Z_]

\W非数字+英文+下划线^[0-9a-zA-Z_]

. 任意字符

次数：

？ 01次 + 至少一次 * 0任意次

\d{5} 五个数字 \d{5,10} 最少五次，最多10次

正则验证注意事项

  1. 规则必须以/^开头
  2. 规则必须以&/结尾
  3. 规则只需要\d,而不是\d
  4. 定义正则对象: var rex=/^\d{5}$/
  5. 使用正则对象：rex.test('123')

案例1：实现密码等级显示

要求：有大写字母等级加一 有小写字母等级加一 有数字有下划线等级加一

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <input type="text" id="m1">
  9. <span id="l1"></span>
  10. <p>
  11.     密码等级<span id="l2"></span>
  12. </p>
  13. <script>
  14.     m1.onkeyup=function (){
  15.         //长度必须在6-10之间
  16.         var str=m1.value
  17.         if(str!=""){
  18.             //定义正则
  19.             var r1=/^\w{6,10}$/
  20.             // 数字 英文（小写 大写） .
  21.             var r2=/^.*[a-z].*$/
  22.             var r3=/^.*[A-Z].*$/
  23.             var r4=/^.*\d.*$/
  24.             //密码等级
  25.             var dj=""
  26.             //开始正则验证
  27.             if(r1.test(str)){
  28.                 l1.textContent="😄"
  29.                 if(r2.test(str))dj+="☆"
  30.                 if(r3.test(str))dj+="☆"
  31.                 if(r4.test(str))dj+="☆"
  32.                 l2.textContent=dj
  33.                 return
  34.             }
  35.             //不满足
  36.             l1.textContent="不符合格式"
  37.             return
  38.         }
  39.         l1.textContent="不能为空"
  40.     }
  42. </script>
  43. </body>
  44. </html>

效果图如下：

案例2：用正则表达式实现表单验证

要求：使用正则表达式对用户名、密码和邮箱进行验证

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style>
  7.             span {
  8.                 color: red;
  9.             }
  10.         </style>
  11.     </head>
  12.     <body>
  13.         <!-- 为什么需要使用正则   ！！   表单验证 -->
  14.         <!-- <form onsubmit="return check()"> -->
  15.         <form id="myForm">
  16.             <p>用户名：<input type="text" id="userName" onkeyup="checkLable(this,/^[a-zA-Z]{3,6}$/,'名字长度在3-6')"><span><i class="error"></i></span></p>
  17.             <p>密码：<input type="text" id="userPwd" onkeyup="checkLable(this,/^\w{6,10}$/,'密码长度在6-10')"><span><i class="error"></i></span></p>
  18.             <p>邮箱：<input type="text" id="userEmail" onkeyup="checkLable(this,/^\w+[.]\w+@\w+[.]\w+$/,'邮箱必须包含@')"><span><i class="error"></i></span></p>
  19.             <p><input type="submit" /></p>
  20.         </form>
  21.         <script>
  22.         
  23.         
  24.         function checkLable(obj,rex,tip) {
  25.             var length = obj.value.length
  26.             // var label=obj.nextElementSibling
  27.             var label=obj.parentElement.getElementsByClassName("error")[0]
  28.             if (length > 0) { //里面有内容
  29.                 //内容在正则匹配之间
  30.                 if (rex.test(obj.value)) {
  31.                     label.textContent = "😊"
  32.                     return true
  33.                 }
  34.                 //不在区间内
  35.                 label.textContent =tip
  36.                 return false
  37.             }
  38.             //里面没有内容
  39.             label.textContent = "长度必须大于0"
  40.             return false
  41.         }
  42.             //添加提交事件 (会具备返回值)
  43.             myForm.onsubmit = () => {
  44.                 //阻止表单的提交 需要返回false
  45.                 var f1=checkLable(userName)
  46.                 var f2=checkLable(userEmail)
  47.                 var f3=checkLable(userPwd)
  48.                 return f1&&f2&&f3
  49.             }
  50.         </script>
  51.     </body>
  52. </html>

案例3：二级联动

要求：两个下拉框 一个实现省份一个实现城市 选择省份就会显示出现对应的城市

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <select id="province" onchange="myChange()">
  9.         </select>
  10.         <select id="cities"></select>
  11.         
  12.         <script type="text/javascript">
  13.         //数组
  14.         //类型不限制
  15.         //长度不限制
  16.         //数组可以是字符串
  17.         var provinces=[]
  18.         //城市
  19.         provinces["湖南省"]=["长沙","湘潭","常德"]
  20.         provinces["湖北省"]=["武汉","荆州","襄阳"]
  21.         provinces["江苏省"]=["南京","苏州","无锡"]
  22.         
  23.         //代省份怎么来
  24.         //for of 相当于foreach 遍历元素
  25.         //for in 遍历下标
  26.         for(let i in provinces){
  27.             //往省份的下拉框中添加选项
  28.             //<option value ="i">i</option>
  29.             province.appendChild(new Option(i,i))
  30.         }
  31.             function setCity(name){
  32.                 for(let i of provinces[name]){
  33.                     cities.appendChild(new Option(i,i))
  34.                 }
  35.             }
  36.             setCity(province.value)
  37.             function myChange(){
  38.                 //清空
  39.                 cities.innerHTML=""
  40.     
  41.                 setCity(province.value)
  42.             }
  43.     </script>
  44.     </body>
  45. </html>

总结：

以上就是关于JavaScript表单验证的一些内容 之后还会更新更多关于其他的内容

欢迎大家关注！！！

标签： javascript html css
本文转载自: https://blog.csdn.net/weixin_62270300/article/details/123287445
版权归原作者 時宜 所有， 如有侵权，请联系我们删除。
登录后发布评论

“JavaScript表单验证”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？