表单验证（js不使用正则表达式）

最新推荐文章于 2024-09-10 14:15:01 发布
最新推荐文章于 2024-09-10 14:15:01 发布
阅读量222 收藏
点赞数
文章标签： html javascript 前端 html5 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51024444/article/details/126062318
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        #tip {

            font-size: 12px;

        }

    </style>

</head>

<body>

    <form action="">

        <div id="tip"></div>

        <p>用户名:<input type="text" name="user" id="user"></p>

        <p>&emsp;密码:<input type="password" name="pwd" id="pwd"></p>

        <p>名字:<input type="text" name="xm" id="xm"></p>

        <input type="submit" value="登录" id="btn">

    </form>

</body>

<script>

    var oIpt1 = document.getElementById("user");

    var oIpt2 = document.getElementById("pwd");

    var oIpt3 = document.getElementById("xm");

    var oIpt4 = document.getElementById("btn");

    var oDiv = document.getElementById("tip");

    var uFlag = false, pFlag = false, nFlag = false;

    //用户名不能为空

    oIpt1.onblur = function () {

        var val = this.value;//获取用户名输入框中的值

        // if(val === ""){

        //     alert("用户名不能为空")

        // }

        if (val.length === 0) {

            oDiv.innerHTML = "用户名不能为空";

            oDiv.style.color = "red";

            uFlag = false;

        } else {

            oDiv.innerHTML = "";

            uFlag = true;

        }

        console.log("uFlag", uFlag);

    }


 

    //密码长度至少6位

    oIpt2.onblur = function () {

        var val = this.value;

        if (val.length < 6) {

            oDiv.innerHTML = "密码输入有误";

            oDiv.style.color = "red";

            pFlag = false;

        } else {

            oDiv.innerHTML = "";

            pFlag = true;

        }

        console.log("pFlag", pFlag);

    }

    //名字输入不能为空并且不能含有数字    "ab1b2"  isNaN()

    oIpt3.onblur = function () {

        var val = this.value;

        if (val.length === 0) {

            oDiv.innerHTML = "名字不能为空";

            nFlag = false;

        } else {

            for (var i = 0; i < val.length; i++) {

                // val[i]   val.charAt(i)  val.substr(i,1)  val.substring(i,i+1)

                var c = val.charAt(i);

                if (!isNaN(c)) {

                    alert("名字输入不能含有数字");

                    nFlag = false;

                    break;

                }

                nFlag = true;

            }

        }

        console.log("nFlag", nFlag);

    }


 

    oIpt4.onclick = function () {

        // if(uFlag && pFlag && nFlag){

        // }else{

        // alert("请重新检查表单");

        // return false;//阻止默认行为  阻止提交行为

        // }

        // if (!uFlag || !pFlag) {

        if (uFlag === false || pFlag === false || nFlag === false) {

            alert("请重新检查表单");

            return false;//阻止默认行为  阻止提交行为

        }

    }

</script>

</html>


 

<!-- <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        #tip {

            font-size: 12px;

        }

    </style>

</head>

<body>

    <form action="">

        <div id="tip"></div>

        <p>用户名:<input type="text" name="user" id="user"></p>

        <p>&emsp;密码:<input type="password" name="pwd" id="pwd"></p>

        <p>名字:<input type="text" name="xm" id="xm"></p>

        <input type="submit" value="登录" id="btn">

    </form>

</body>

<script>

    var oIpt1 = document.getElementById("user");

    var oIpt2 = document.getElementById("pwd");

    var oIpt3 = document.getElementById("xm");

    var oIpt4 = document.getElementById("btn");

    var oDiv = document.getElementById("tip");

    oIpt4.onclick = function () {

        var uv = oIpt1.value;//获取用户名输入值

        var pv = oIpt2.value;//获取密码输入值

        //用户名不能为空

        if (uv === "") {

            oDiv.innerHTML = "用户名不能为空";

            return false;//阻止默认行为

        }

        // 密码长度至少6位

        if (pv.length < 6) {

            oDiv.innerHTML = "密码长度不能少于6位";

            return false;

        }

    }

</script>

</html> -->

白泽的笔记
关注
不使用正则表达式 匹配字符串（字母）
烽火戏猪侯的博客
07-26 458
package a_不常用类; public class 正则表达式_no { public static void main(String[] args){ String str = "asd&sdklkl"; comp(str); // char ch = 'a'; // System.out.println(ch+0); // System.out.println('z'>'x
JavaScript不用正则验证密码强度
htcvive的博客
07-13 302
效果图 HTML结构 <div class="wrap"> <input type="text" class="pass"> <div class="box"> <p>弱</p> <p>中</p> <p>强</p> </div> </div> CSS结构 <style> *{ mar
JavaScript前端form验证(不用正则表达式)
crazy java
09-17 295
注:需要配套的js跟html文件    困难的地方是如何维持,class的累加! invalid这个class是累加在固有class上的，中间用空格隔开!    本文参考《JavaScript &amp; Ajax》文中对此的校验函数之前嵌套太多，看了头大。故我将其拆分成独立的函数    case条件处需要优化，还有其他地方也需要修改!   ...
您不需要正则表达式
cumi6497的博客
07-31 112
by Rina Artstain 通过丽娜·阿斯特斯坦 您不需要正则表达式 (You Don’t Need a Regex for That) I once had a web siteon which one could searchfor all sorts of things(as long as they’re strings) 我曾经有一个网站，可以搜索各种各样的东西(只要它们是字符...
获取网页指定内容,终于不用正则表达式.
浤济的专栏
11-05 581
刚设计一个获取网页内中草药资料提取的软件,原想找些正则表达式来达到获取文字资料,试找了些,都是获取链接和链接文字的，还有获取TD间文字的没试过，不过对照获取到的网页内容可见效果不很满意,于是自己对网页内容进行分析,经过2天的努力,终于不用正则表达式,获取到想要的纯文字资料,下面是使用语句获取的一个网页内容: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...
正则表达式，js表单验证
weixin_45851686的博客
09-08 777
正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等，常用于表单验证等。参考文档：https://www.runoob.com/regexp/regexp-tutorial.html 正则表达式语法案例： <script> /*1. 边界符 ^开头 $结尾*/ var re=/abc/;//abc含有abc
常用表单验证的正则表达式（js）
qq_43283391的博客
07-04 322
function checkName(account) { let regName = new RegExp("^[\u4E00-\uFA29\uE7C7-\uE7F3]{2,18}$"); //只允许输入中文，长度2-18 if (regName.test(account)) { return true; } return false;　　　 } function cheackAccount(account) { let regName = ne
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
10-18
除了介绍如何使用jQuery进行表单验证之外，本文还提到了一些在线正则表达式的工具，这些工具可以帮助开发者生成或者测试正则表达式。在线正则表达式测试工具可以方便开发者验证正则表达式是否能够正确地匹配文本，而...
JS正则表达式验证数字（非常全）
10-20
正则表达式（Regular Expression），是一种文本模式的描述方法，它提供了一种在字符串中进行搜索、替换、匹配等操作的方式，而JS正则表达式是正则表达式在JavaScript语言中的实现。在软件开发中，正则表达式被广泛...
JavaScript 表单验证正则表达式大全[推荐]
12-12
具体和函数结合的使用方法，还请查看下篇文章 JavaScript 使用正则表达式进行表单验证的示例代码 代码如下:匹配中文字符的正则表达式： [u4e00-u9fa5] 评注：匹配中文还真是个头疼的事，有了这个表达式就好办了 匹配...
JavaScript 使用正则表达式进行表单验证的示例代码
12-12
JavaScript 表单验证正则表达式大全利用正则表达式判断是否是0-9的阿拉伯数字 代码如下: function regIsDigit(fData) { var reg = new RegExp(“^[0-9]$”); return (reg.test(fData)); } 利用这则表达式获取字符串...
JS编程建议——47：避免使用正则表达式的场景
weixin_34311757的博客
12-16 100
建议47：避免使用正则表达式的场景正则表达式匹配速度是非常快的。然而，当只搜索文字字符串时正则匹配经常会显得多余，尤其当事先知道了字符串的哪一部分将要被测试时。例如，要检查一个字符串是不是以分号结束，可以使用：endsWithSemicolon = /;$/.test(str);当前没有哪个浏览器“聪明”到这个程度，能够意识到这个正则表达式只能匹配字符串的...
JavaScript正则表达式：字符串不包含
Web 开发&软件开发
07-27 2158
JavaScript正则表达式：字符串不包含 由于某种原因，我认为正则表达式可以解决所有问题，并且由于某种原因，我总是发现我要创建的正则表达式过于复杂，可能不是获取所需内容的最佳途径。 举例：我需要创建一个正则表达式，该表达式不匹配字符串。 我不想匹配的字符串，其中包括[requires-login] ，但希望到别的匹配的一切。 让我们暂时搁下为什么，这是我如何实现想要的结果： // A...
正则表达式匹配字符串匹配非_匹配模式和字符串而不使用正则表达式
06-26 176
正则表达式匹配字符串匹配非Description: 描述： This is a standard interview problem to match a pattern and string without using regular expressions using backtracking algorithm. 这是在不使用正则表达式的情况下使用回溯算法来匹配模式和字符串的标准采访问...
php表单确认密码,jQuery表单验证之密码确认实例详解
weixin_33185844的博客
03-10 335
本文主要为大家详细介绍了jQuery表单验证之密码确认的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。众所周知，在修改密码时会需要两次输入密码。这时如何确保两个密码框中都有内容？两个密码框中是一致的？如果一个没有输入会给出提示？OK这一切都可以用JS来实现，具体思想很简单啦，就是编写事件获取dom节点，判断对象的取值呀？那么编写什么事件？应该是onblur事件~。而...
JQuery表单验证(包括:用户名,手机号,密码,确认密码,验证码60s)
weixin_34137799的博客
04-18 2373
每个项目中都会有登录注册模块的一些验证。比如说：用户名我们要验证位数和是否符合用户名规则；密码要验证字母开头，长度，是否包含下划线等等，这里我总结了一下常用的验证规则，用的是项目中用到的class和id ,如果自己用到的话要对名称做相应的修改。 验证用户名的方法： function username() { ...
前端用html写excel文件直接打开
最新发布
全易
09-10 549
html文件直接用excel打开
JavaScript表单验证实战与常用正则表达式
在Web开发过程中，JavaScript表单验证是至关重要的一步，它确保用户输入的数据符合预期格式和规则，从而提高用户体验并保护后端服务器不受恶意数据的影响。本文档提供了一些关键的JavaScript表单验证参考，涵盖了多...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值