javascript实现-表单正则应用

最新推荐文章于 2024-09-22 08:46:53 发布
最新推荐文章于 2024-09-22 08:46:53 发布
阅读量432 收藏
点赞数
分类专栏： javascript 文章标签： 正则 javascript 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/garvisjack/article/details/54849729
版权

以下是之前练习正则表达式时候做的js表单测试.
input里的value用.test()比较以后，处理正则和需求，反馈，代码欠优化，但功能完善，仅供参考学习

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新用户注册</title>
    <link rel="stylesheet" href="./css/regForm.css" type="text/css">
    <script type="text/javascript" src="js/regForm.js"></script>       <!--外部样式和JS*-->
</head>
<body>
    <div id="section">
        <form action="" method="get" id="form">
        <table id="table">
            <tr>
                <td>用户名</td>
                <td><input id="username" type="text" class="text"></td>
                <td><div class="icon" id="usernameicon"></div></td>
            </tr>
            <tr>
                <td>Email</td>
                <td><input type="text" class="text" id="email"></td>
                <td><div class="icon" id="emailicon">(请输入正确的Email地址)</div></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" id="password"></td>
                <td><div id="pwicon" class="icon">(请输入强度较高的密码)</div></td>
            </tr>
            <tr>
                <td>密码强度</td>
                <td>
                    <div class="pwstrength" id="low">弱</div>
                    <div class="pwstrength" id="middle">中</div>
                    <div class="pwstrength" id="strong">强</div>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td><input id="cfpw" type="password" class="text" value=""></td>
                <td><div class="icon" id="cfpwicon"></div></td>
            </tr>
            <tr>
                <td>MSN</td>
                <td><input id="msn" type="text" class="text">
                </td>
                <td><div class="icon" id="msnicon"></div></td>
            </tr>
            <tr>
                <td>QQ</td>
                <td><input type="text" class="text" id="qq">
                </td>
                <td><div id="qqicon" class="icon">(请输入正确的QQ号码)</div></td>
            </tr>
            <tr>
                <td>办公电话</td>
                <td><input id="offphone" type="text" class="text"></td>
                <td><div class="icon" id="offphoneicon"></div></td>
            </tr>
            <tr>
                <td>家庭电话</td>
                <td><input id="homephone" type="text" class="text">
                </td>
                <td><div class="icon" id="homephoneicon"></div></td>
            </tr>
            <tr>
                <td>手机</td>
                <td ><input type="text" class="text" id="phone"></td>
                <td><div class="icon" id="phoneicon">(请输入正确的手机号)</div></td>
            </tr>
            <tr>
                <td>密码提示问题</td>
                <td>
                <select class="text" name="question" value="">
                    <option value="" selected>请选择密码提示问题</option>
                    <option value="">你热爱编程吗？</option>
                    <option value="">你的中学名字是？</option>
                    <option value="">最开心的事是什么？</option>
                </select>               
                </td>
                <td></td>
            </tr>
            <tr>
                <td>密码问题答案</td>
                <td><input id="answer" type="text" class="text"></td>
                <td><div class="icon" id="answericon"></div></td>
            </tr>
            <tr>
                <td></td>
                <td class="lasttext"><input type="radio">我已看过并接受《<a href="">用户协议</a>》</td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="image" src="image/login.png" id="login"></td>
                <td></td>
            </tr>
        </table>
        </form>
    </div>  
</body>
</html>

css部分>>


body{
background:url("../image/10.png") repeat-x;
}
#section{
    width:1002px;
    height:612px;
    margin:15px auto;
    position:relative;
}
#table{
    width:600px;
    height:550px;
    background-color:#fff;
    position:absolute;
    font-size:18px;
    line-height:5px;
    border-radius: 5px;
    box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    box-sizing: border-box;
    width: 80%;
    margin: 0 10%;
}
#table .pwstrength{
    float:left;
    height:30px;
    width:60px;
    line-height:30px;
    text-align:center;
    border-radius:4px;
    color:#000;
}
#table .text{
    width:215px;
    height:32px;

}
#password{
    width:215px;
    height:32px;

}
#table .lasttext{
    font-size:14px;
}
#table tr td{
    width:180px;
}
#table .icon{
    width:175px;
    height:24px;
    float:left;
    background:no-repeat;
    font-size:12px;
    color:#000;
    text-align:right;
    line-height:24px;
}

javascript部分，这边使用的是dom2级操作，先封装好事件对象，在IE和非IE的情况下进行操作

//封装一下兼容性函数
    var EV ={
        //绑定事件兼容
        addEvent:function(node,ename,fn){
            if(navigator.userAgent.toLowerCase().indexOf("ie")!=-1){             //在ie下添加绑定事件
                node.attachEvent("on"+ename,fn);
            }else{
                node.addEventListener(ename,fn,false);
            }
        },
        removeEvent:function(node,ename,fn){
            if(navigator.userAgent.toLowerCase().indexOf("ie")!=-1){             //在ie下添加绑定事件
                node.detachEvent("on"+ename,fn);
            }else{
                node.removeEventListener(ename,fn,false);
            }
        }
    }
window.onload=function(){
//email地址检测 html事件处理
    var eMail = document.getElementById("email");
    EV.addEvent(eMail,"blur",checkEmail);
    function checkEmail(){  
        var email = document.getElementById("email").value;
        var emailicon = document.getElementById("emailicon");
        var epatt = new RegExp("\\w+@[a-zA-Z0-9]+\\.[a-zA-Z0-9]{2,14}");
                                                    //利用正则表达式
        if(epatt.test(email)){
            emailicon.style.backgroundImage="url('image/tick.png')";
            emailicon.innerHTML="";
        }
        else{
            emailicon.style.backgroundImage="url('image/cross.png')";
            emailicon.innerHTML="请输入正确的邮箱地址!";
            emailicon.style.color="#dd0000";
        }
    }
//密码强度检测
    var pwd =document.getElementById("password");
    EV.addEvent(pwd,"blur",checkCode);
    function checkCode(){
        var pwdv =document.getElementById("password").value;
        var low =document.getElementById("low");
        var middle =document.getElementById("middle");
        var strong =document.getElementById("strong");
        var pwssicon =document.getElementById("phoneicon");
        var pwdpatt1 = /\d+/g;  //数字
        var pwdpatt2 = /[a-zA-Z]+/g;  //字母
        var pwdpatt3 = /(\W)+/g;  //特殊字符
        var booldata1,booldata2,booldata3;
        if(pwdv.length<6){
            pwicon.style.backgroundImage="url('image/cross.png')";
            pwicon.innerHTML="密码不得少于6位数!";
            pwicon.style.color="#dd0000";
        }
        if(pwdv==""){
            pwicon.style.backgroundImage="url('image/cross.png')";
            pwicon.innerHTML="密码项不能为空!";
            pwicon.style.color="#dd0000";
        }
        if(pwdpatt1.test(pwdv)){
            booldata1 = true;
        }
        if(pwdpatt2.test(pwdv)){
            booldata2 = true;
        }
        if(pwdpatt3.test(pwdv)){
            booldata3 = true;
        }

            if(booldata1||booldata2||booldata3){
                low.style.backgroundColor="#CB4042";
                pwicon.style.backgroundImage="url('image/tick.png')";
                pwicon.innerHTML="";
            }                                       //强度低

            if((booldata1&&booldata2)||(booldata1&&booldata3)||(booldata3&&booldata2)){
                middle.style.backgroundColor="#F7C242"; 
                pwicon.style.backgroundImage="url('image/tick.png')";
                pwicon.innerHTML="";               //强度中
            }
            if(booldata1&&booldata2&&booldata3){
                strong.style.backgroundColor="#227D51";
                pwicon.style.backgroundImage="url('image/tick.png')"; 
                pwicon.innerHTML="";                           //强度强
            }
        }   

        //检测QQ号码
        var qq =document.getElementById("qq");
        EV.addEvent(qq,"blur",checkQQ);
        function checkQQ(){
            var qqicon =document.getElementById("qqicon");
            var qqtext =document.getElementById("qq").value;
            var qqpatt = /^[1-9](\d{5,10})$/;
            if(qqpatt.test(qqtext)){
                qqicon.style.backgroundImage="url('image/tick.png')";
                qqicon.innerHTML="";
            }
            else{
                qqicon.style.backgroundImage="url('image/cross.png')";
                qqicon.innerHTML="请输入5至11位数的QQ号码";
                qqicon.style.color="#dd0000";
            }
        }
        //检测手机号 
        var phone = document.getElementById("phone");
        EV.addEvent(phone,"blur",checkPhone);
            function checkPhone(){
                var phoneicon =document.getElementById("phoneicon");
                var phonenum = document.getElementById("phone").value;
                var phonepatt = /^0?(13|15|14|18)[0-9]{9}$/;
                if(phonepatt.test(phonenum)){
                    phoneicon.style.backgroundImage="url('image/tick.png')";
                    phoneicon.innerHTML="";
                }
                else{
                    phoneicon.style.backgroundImage="url('image/cross.png')";
                    phoneicon.innerHTML="请输入正确的手机号!";
                    phoneicon.style.color="#dd0000";
                }
            }

    //检测用户名
        var username = document.getElementById("username");
        EV.addEvent(username,"blur",checkUser);
        function checkUser(){
            var usercon = document.getElementById("username").value;
            var usernameicon =document.getElementById("usernameicon");
            var unpatt = /[A-Za-z0-9_\-\u4e00-\u9fa5]{6,18}/;
            if(unpatt.test(usercon)){
                usernameicon.style.backgroundImage="url('image/tick.png')";
                usernameicon.innerHTML="";
            }
            else{
                usernameicon.style.backgroundImage="url('image/cross.png')";
                usernameicon.innerHTML="用户名至少大于6个字符!";
                usernameicon.style.color="#dd0000";
            if(usercon==""){
                usernameicon.style.backgroundImage="url('image/cross.png')";
                usernameicon.innerHTML="用户名不能为空!";
                usernameicon.style.color="#dd0000";
            }
        }
    //确认密码
        var Cfpw =document.getElementById("cfpw");
        EV.addEvent(Cfpw,"blur",cfPw);
        function cfPw(){
            var cfpw =document.getElementById("cfpw").value;
            var cfpwicon=document.getElementById("cfpwicon");
            var pwd =document.getElementById("password").value;
            if(cfpw==pwd&&cfpw!=""){
                cfpwicon.style.backgroundImage="url('image/tick.png')";
                cfpwicon.innerHTML="";
            }else{
                cfpwicon.style.backgroundImage="url('image/cross.png')";
                cfpwicon.innerHTML="输入的密码不一致!";
                cfpwicon.style.color="#dd0000";
            }
        }
    //MSN
        var Msn = document.getElementById("msn");
        EV.addEvent(Msn,"blur",checkMsn);
        function checkMsn(){
            var msn =document.getElementById("msn").value;
            var msnicon =document.getElementById("msnicon");
            var msnpatt = /\w+@[a-zA-Z0-9]+\.[a-zA-Z0-9]{2,14}/;
            if(msnpatt.test(msn)){
                msnicon.style.backgroundImage="url('image/tick.png')";
                msnicon.innerHTML="";
            }else{
                msnicon.style.backgroundImage="url('image/cross.png')";
                msnicon.innerHTML="msn应为正确邮箱地址!";
                msnicon.style.color="#dd0000";
            }
        }   
    //办公电话
        var officephone =document.getElementById("offphone");
        EV.addEvent(officephone,"blur",checkoffPhone);
        function checkoffPhone(){
            var offphone = document.getElementById("offphone").value;
            var offphoneicon =document.getElementById("offphoneicon");
            var offpatt = /(\(\d{3,4}\)|\d{3,4}-)?\d{8}/;
            if(offpatt.test(offphone)){
                offphoneicon.style.backgroundImage="url('image/tick.png')";
                offphonecon.innerHTML="";
            }else{
                offphoneicon.style.backgroundImage="url('image/cross.png')";
                offphoneicon.innerHTML="例:010-88888888";
                offphoneicon.style.color="#dd0000";
            }
        }
    //家庭电话
        var Homephone =document.getElementById("homephone");
        EV.addEvent(Homephone,"blur",checkHomephone);
        function checkHomephone(){
            var homephone =document.getElementById("homephone").value;
            var homephoneicon =document.getElementById("homephoneicon");
            var homepatt = /(\(\d{3,4}\)|\d{3,4}-)?\d{8}/;
            if(homepatt.test(homephone)){
                homephoneicon.style.backgroundImage="url('image/tick.png')";
                homephonecon.innerHTML="";
            }else{
                homephoneicon.style.backgroundImage="url('image/cross.png')";
                homephoneicon.innerHTML="例:010-88888888";
                homephoneicon.style.color="#dd0000";
            }
        }
    //问题答案
            function checkAnswer(){
            var answer =document.getElementById("answer").value;
            var answericon =document.getElementById("answericon");
            if(answer!=""){
                answericon.style.backgroundImage="url('image/tick.png')";
                answercon.innerHTML="";
            }else{
                answericon.style.backgroundImage="url('image/cross.png')";
                answericon.innerHTML="密码问题答案不能为空!";
                answericon.style.color="#dd0000";
            }
        }
    //登录注册
            var login =document.getElementById("login");
            EV.addEvent(login,"click",Login);
            function Login(){
                var form =document.getElementById("form");
                if(username.value==""){
                    alert("用户名不能为空!");
                    this.value.focus();
                    return false;
                }
                if(password.value==""){
                    alert("密码不能为空!");
                    this.value.focus();
                    return false;
                }
                if(email.value==""){
                    alert("email不能为空!");
                    this.value.focus();
                    return false;
                }
                else{
                var info =confirm("信息填写完整，确定注册吗?");
                if(info==true){
                    window.open("http://www.eduasksz.com","_blank");
                }   
            }    
        }       
    }
}
Jack-小俊
关注
专栏目录
原生JS实现表单验证（基于正则表达式）
m0_70274918的博客
04-29 580
在静态表单的基础上，我们想一下要做的效果 我们想实现的效果： 1. 实现单击获取验证码时的倒计时效果😄 2. 通过正则表达式判断输入的姓名和电话号是否符合规范🙋 3. 如果符合规范会在后面打绿色的对号，不符合规范会在输入框里提示红色的提示字样🐶 4. 当姓名或手机号有不符合规范的时候点击提交会弹出不正确的提示框，二者都符合规范时点击提交弹出提交成功对话框💣 我们一个一个效果来完成，先看一下倒计时效果： 首先我们点击获取验证码这里，会立刻进入一个三秒钟的倒计时，然后里面的文字变成了倒计时秒数，并且在进入倒计
Javascript的表单验证-揭开正则表达式的面纱
11-23
在上篇文章给大家介绍了javascript的表单验证-初识正则表达式，本文给大家介绍Javascript的表单验证-揭开正则表达式的面纱，具体详情请看全文。 用元字符匹配相应的字符类型 创建正则表达式有点像创建字符串字面量，...
Js表单 form 正则表达式
weixin_40746230的博客
05-25 368
Js表单 form 正则表达式
js表单验证与正则
weixin_67150631的博客
03-06 1202
正则的js写法，js的表单验证
el-input正则校验
qq_46376192的博客
06-27 215
el-input正则校验
el-form正则常用
m0_50981596的博客
04-30 330
el-form正则常用。
JavaScript -- 正则表达式介绍
天行健 君子以自强不息，地势坤 君子以厚德载物。
12-13 468
正则表达式 正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。 正则表达式的特点 1.灵活性、逻辑性和功能性非常的强。 2.可以迅速地用极简单的方式达到字符串的复杂控制。 2.正则表达式在JavaScript中的使用 在 JavaScript 中，可以通过两种方式创建一个正则表达式。 方式一：通过调用RegExp对象的构造函数创建 var regexp = new RegExp(/123/); console.log(r
el-form-item 正则验证
IT_iosers的博客
06-29 911
el-form-item 正则验证
vue el-form表单校验以及常用正则
2401_85124163的博客
06-10 1140
KaTeX parse error: Undefined control sequence: \d at position 15: / 或 /^(-([1-9]\̲d̲\*\.\d\*|0\.\d\…([1-9]\̲d̲\*\.\d\*|0\.\d\…KaTeX parse error: Undefined control sequence: \d at position 12: / 或 /^[1-9]\̲d̲\*\.\d\*|0\.\d\…非正浮点数：/^((-\d+(.\d+)?\d+(.\d+)?
JavaScript---表单验证和正则表达式
最新发布
2401_87288860的博客
09-22 354
避免直接提交到服务器，可以显著降低服务器开销2.提升用户体验早期的互联网，表单项都是非常多的，注册个账号，经常需要填写20+个字段。而其中有一个填写不正 确就要等待几十秒时间。如果有了表单验证，反馈是实时的，
JavaScript系统学习---10---正则表达式
習習君的博客
05-26 1467
1. 正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象 。 2. 通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。 3. 正则表达式在 JavaScript中的使用场景。
Javascript的表单验证-初识正则表达式
10-22
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。接下来通过本文给大家介绍Javascript的表单验证-初识正则表达式，对js表单验证正则表达式相关知识感兴趣的朋友一起学习吧
Javascript的表单验证-揭开正则表达式的面纱_.docx
10-09
### JavaScript的表单验证——揭开正则表达式的面纱 #### 一、引言 在Web开发中，表单验证是确保用户输入有效性的关键步骤之一。JavaScript通过其内置的正则表达式功能，能够高效地完成这一任务。本文将详细介绍...
npm（包管理器）安装vue
YangJack-前端开发
05-23 2188
最近工作前端开发上，准备学习vue.js 该框架可以直接script引用加载，也可以通过npm包管理器安装。 在用 Vue.js 构建大型应用时推荐使用 NPM 安装， NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。 Vue.js 也提供配套工具来开发单文件组件。详细的安装流程和中文文档： https://vuefe.cn/v2/guide/install
javasctipt实现-复选框全选/反选的实现
YangJack-前端开发
01-30 1833
以下是用原生js实现的复选框全选/反选的实现 选中checkbox的时候，实现全选的效果，并且样式发生改变。 代码最简洁，js行为优化版，复制粘贴即可使用。 ** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复选框全选/反选效果实现</title> <style>
javascript实现-冒泡排序算法
YangJack-前端开发
01-31 1661
//以下代码是自己用冒泡算法结合dom操作实现的排序操作。 熟悉js功能的朋友可以直接用sort()内置函数实现数组的排序，此方法是自己写的冒泡排序，有助于理解算法的思想. 代码可直接复制使用，已经优化精简//<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>冒泡排序</titl
javascript实现-右下角广告框效果
YangJack-前端开发
01-29 1375
**以下是用原生js实现的简单网页主页右下角的广告框效果； 利用好绝对定位，点击X关闭广告，里面的内容不管动图或者视频都可以。 代码最简洁，js行为优化版，复制粘贴即可使用。 ** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右下角广告框效果</title> </head> <st
javascript实现-最简单选项卡切换
YangJack-前端开发
01-30 1172
以下是用原生js实现的最简单选项卡切换效果。 鼠标滑过，对应的隐藏部分显示，并且样式发生改变。 代码最简洁，js行为优化版，复制粘贴即可使用。 ** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript-实现最简易选项卡</title> <style> body,ul,li{margi
JavaScript表单验证与正则表达式应用教程
本教程主要关注JavaScript在实际应用中的案例，通过PPT形式讲解，涵盖了表单验证、正则表达式、String对象的使用以及表单选择器等多个重要知识点。 1. 表单验证：表单验证是前端开发中的重要环节，它能在用户提交...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值