js正则表达

下面是代码展示，这只是初级的代码，还可以再加以简化

但是什么是正则表达式，我很懒就不想写了，以后可能会发一些相关的内容

什么是正则表达式

正则表达式时一种高级的处理字符的一种规则

正则表达式是由a-z等一些特殊的元字符组成的
　　
正则表达式是由一个字符序列形成的搜索模式。

当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
　　
这就是正则表达式，不理解可以去博客园，也懒得解释

正则表达式的作用:

1，灵活性、逻辑性和功能性非常的强
2，可以迅速地用极简单的方式达到字符串的复杂控制，规定输入格式
3，对于刚接触的人来说，比较晦涩难懂，刚开始我也很懵逼

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<center>
    <br/><br/>
    <h2>信息校验</h2>
    用户名  ： <input type="text" id="name"   style="width: 300px;height: 40px"><span id="nameResult"></span><br/><br/>
    密码    ： <input type="text" id="pwd"  style="width: 300px;height: 40px"><span id="pwdResult"></span><br/><br/>
    确认密码： <input type="text" id="sure"  style="width: 300px;height: 40px"><span id="sureResult"></span><br/><br/>
    邮箱    ： <input type="text" id="emli"  style="width: 300px;height: 40px"><span id="emliResult"></span><br/><br/>
    手机号  ： <input type="text" id="phone"  style="width: 300px;height: 40px"><span id="phoneResult"></span><br/><br/>
    身份证号： <input type="text" id="ID"  style="width: 300px;height: 40px"><span id="IdResult"></span><br/><br/>
    地址    ： <input type="text" id="pace"  style="width: 300px;height: 40px"><span id="paceResult"></span><br/><br/>
    <input type="button" value="点击校验" onclick="verify()"  style="width: 200px;height: 50px" >


</center>


    <script type="text/javascript">

        function verify() {

            var name = document.getElementById("name").value;
            var pwd = document.getElementById("pwd").value;
            var sure = document.getElementById("sure").value;
            var emli = document.getElementById("emli").value;
            var phone = document.getElementById("phone").value;
            var ID = document.getElementById("ID").value;
            var pace = document.getElementById("pace").value;


            //1:用户名:  大写字母开头 6-20位字符(不允许有符号但是允许有_)
            var nameL =/^[A-Z][A-Za-z][a-zA-Z0-9_]{5,19}$/;

            //2:密码：大写开头 数字字母符号混合 8-15位
            var pwdL = /^[A-Z][A-Za-z0-9]\w{7,14}.{1,30}$/;

            //3:确认密码  大写开头 数字字母符号混合 8-15位
            var sureL = /^[A-Z][A-Za-z0-9]\w{7,14}.{1,30}$/;

            //4:邮箱      邮箱格式
            var emliL = /^[A-Z0-9]+@[a-z0-9]+.com$/;

            //5:手机号    手机号格式
            var phoneL = /^[1][3,4,5,6,7,8][0-9]{9}$/;

            //6:身份证号  身份证号格式
            var IDL = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

            //7:地址      中文开头  数字 - 字母 中文混合
            var paceL = /([^\x00-\xff]|[A-Za-z0-9_])+$/;



            var result = nameL.test(name.trim());
            var result1 = pwdL.test(pwd.trim());
            var result2 = sureL.test(sure.trim());
            var result3 = emliL.test(emli.trim());
            var result4 = phoneL.test(phone.trim());
            var result5 = IDL.test(ID.trim());
            var result6 = paceL.test(pace.trim());

            if (result) {
                document.getElementById("nameResult").innerText = "✔";
                document.getElementById("nameResult").style.color = "green";
            } else {
                document.getElementById("nameResult").innerText = "✘";
                document.getElementById("nameResult").style.color = "red";
            }

            if (result1) {
                document.getElementById("pwdResult").innerHTML = "✔";
                document.getElementById("pwdResult").style.color = "green";
            } else {
                document.getElementById("pwdResult").innerText = "✘";
                document.getElementById("pwdResult").style.color = "red";
            }

            if (result2) {
                document.getElementById("sureResult").innerText = "✔";
                document.getElementById("sureResult").style.color = "green";
            } else {
                document.getElementById("sureResult").innerText = "✘";
                document.getElementById("sureResult").style.color = "red";
            }

            if (result3) {
                document.getElementById("emliResult").innerText = "✔";
                document.getElementById("emliResult").style.color = "green";
            } else {
                document.getElementById("emliResult").innerText = "✘";
                document.getElementById("emliResult").style.color = "red";
            }

            if (result4) {
                document.getElementById("phoneResult").innerText = "✔";
                document.getElementById("phoneResult").style.color = "green";
            } else {
                document.getElementById("phoneResult").innerText = "✘";
                document.getElementById("phoneResult").style.color = "red";
            }

            if (result5) {
                document.getElementById("IdResult").innerText = "✔";
                document.getElementById("IdResult").style.color = "green";
            } else {
                document.getElementById("IdResult").innerText = "✘";
                document.getElementById("IdResult").style.color = "red";
            }

            if (result6) {
                document.getElementById("paceResult").innerText = "✔";
                document.getElementById("paceResult").style.color = "green";
            } else {
                document.getElementById("paceResult").innerText = "✘";
                document.getElementById("paceResult").style.color = "red";
            }


        }


</script>

</body>

</html>

这是出来的效果，可以看一下

输入一些字符，符号，数字，点击校验后，判断是否符合代码中规定好的格式

由于图片中后面几项没有输入痕迹（空），就显示为错误
在这里插入图片描述

Demo_layui

发布了27 篇原创文章 · 获赞 45 · 访问量 2682

私信关注

猜你喜欢