JS正则表达式实现简单的表单验证（账号，密码，手机号）

首先有三个文本框，和一个提交按钮，第一个输入账号，第二个密码，第三个手机号
我们的需求：判断3个文本框是否全部输入正确，当我们点击提交时，如果有一个输入错误则不能提交，全部输入正确则提交成功；

下面直接上代码
表单代码

 <form action="http://www.taobao.com"><input type="text"><span></span><br><input type="text"><span></span><br><input type="text"><span></span><br><input type="submit"></form>

JS代码

<script>var ids;//获取表单，给表单添加输入事件和提交事件var form = document.querySelector("form");form.addEventListener("submit", formHandler);form.addEventListener("input", formHandler);//获取所有的input元素列表并转换为数组var list = Array.from(document.querySelectorAll("input"));//删除数组最后一个元素，也就是删除submit 提交，数组保留3个文本框list.pop();// 创建一个数组，里面给入3个false，意味着初始没输入时默认错误var arr = [];for (var i = 0; i < list.length; i++) {arr.push(false);}function formHandler(e) {//输入时，查找点击元素在数组中的下标,并且判断输入内容是否符合我们设置的标准if (e.type === "input") {//节流if (ids) return;ids = setTimeout(function () {clearTimeout(ids);ids = 0;var index = list.indexOf(e.target);// 将返回的布尔值赋值给boolvar bool = getVerify(index, e.target.value);if (bool) {// bool值为true时，输入正确时，在span里面显示文本内容设置颜色e.target.nextElementSibling.textContent = "输入正确";e.target.nextElementSibling.style.color = "green";} else {// bool值为false时，输入错误，在span里面显示文本内容设置颜色e.target.nextElementSibling.textContent = "输入错误";e.target.nextElementSibling.style.color = "red";}console.log(arr, index)// 将返回的bool值添加至数组对应的下标，输入正确返回true错误返回falsearr[index] = bool;}, 500)} // 当提交时，并且在数组里查找不到false，提交成功，否则不能提交else if (e.type === "submit" && arr.indexOf(false) === -1) {} else {e.preventDefault();console.log("请输入正确后提交");}}function getVerify(index, value) {//判断点击元素的下标，这里return返回的都是一个布尔值switch (index) {// 下标为0时，第一个文本框，我们认为是账户，在输入的值中查找是否符合正则（8-16位数字，字母下划线组合）case 0:return /^\w{8,16}$/.test(value);//下标为1时，第二个文本框，我们认为是密码case 1:return /^(?=\D+\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,16}$/.test(value);// 下标为2时，第三个文本框，我们认为是电话，简单写的正则，只限定了1开头后面跟10位数字case 2:return /^1\d{10}$/.test(value);}}
</script>

JS正则表达式实现简单的表单验证（账号，密码，手机号）相关推荐

angularjs学习第四天笔记（第一篇：简单的表单验证）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
jQuery之简单的表单验证
jQuery之简单的表单验证 html部分: <body><form method="post" action=""><div c ...
用jQuery写的最简单的表单验证
近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...
php表单确认密码,jQuery表单验证之密码确认实例详解
本文主要为大家详细介绍了jQuery表单验证之密码确认的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 众所周知,在修改密码时会需要两次输入密码.这时如何确保两个密码框 ...
js使用策略模式实现表单验证
使用策略模式实现表单验证 1.什么是策略模式策略模式说起来很高大上,其实现实生活中很常见.比如,你要从老家去北京故宫游玩,可选的出行方式有坐火车.开车自驾.坐飞机等几种方式, 至于选择哪种出现方式要 ...
js表单验证确认密码输入一致
<form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()" >用户名 ...
密码与确认密码自动验证html,html表单验证确认密码
编写HTML注册表单,,javascript表单验证编写HTML注册表单,,需要字段:用户名,密码,确认密码,邮件,确认邮件,性汗....阁下语气可以舒缓一些吗? 我们抽出自己的时间来帮助别人,不是 ...
layui前端表单验证（身份证,手机号图形验证码等）
文章目录前言一.layui前端验证二.使用步骤 1.以下介绍几个常用的前端验证 2.thinkphp后台验证 3.效果展示前言 layui前端框架是一款比较流行的前端框架,多模块集成的UI框架 ...
Vue简单的表单验证
前端验证必不可少~ 输入框验证 vue文件部分: <form :model="form" :rules="rules" ref="form&qu ...

JS正则表达式实现简单的表单验证（账号，密码，手机号）

JS正则表达式实现简单的表单验证（账号，密码，手机号）相关推荐

最新文章

热门文章