JavaScript表单验证

最新推荐文章于 2023-10-19 23:28:30 发布
最新推荐文章于 2023-10-19 23:28:30 发布
阅读量61 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51073424/article/details/116885029
版权 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单验证</title>
    <style>
        * {font-size: 13px;}
        table{border-collapse:collapse;}
        table td{padding: 5px;}
        span.pass{color: green;}
        span.error{color: red;}
    </style>
<script>
    window.onload = function(){
        document.querySelector('#txtUloginId').addEventListener('blur',checkLoginId);
        document.querySelector('#txtPassword').addEventListener('blur',checkPassword);
        document.querySelector('#txtRePassword').addEventListener('blur',checkRepassword);
        document.querySelector('#txtRealName').addEventListener('blur',checkRealName);
        document.querySelector('#txtPostCode').addEventListener('blur',checkPostCode);
        document.querySelector('#txtEmail').addEventListener('blur',checktEmail);
        document.querySelector('#txtTel').addEventListener('blur',checkTel);
        document.querySelector('#txtIdentifiedNo').addEventListener('blur',checkIdentifiedNo);
        document.querySelector('#submit').addEventListener('click',checkAll);

    }

    /*账户非空验证*/
    function checkLoginId(){
        let txtUloginIdTag =document.querySelector('#txtUloginId');
        let sp=document.querySelector('#loginIdErro');
        let reg = /^\w+$/;
        if(!reg.test(txtUloginIdTag.value)){
            sp.innerHTML='账号不能为空';
            sp.className='error';
            return false;
        }
        sp.innerHTML='通过（✔）';
        sp.className='pass';
        return true;
    }

    /*密码非空以及位数验证*/
    function checkPassword(){
        let txtPasswordTag = document.querySelector('#txtPassword');
        let sp=document.querySelector('#passwordErro');
        let reg1 = /^\w+$/ ;
        let reg2 = /^\w{6,12}$/;
        if(!reg1.test(txtPasswordTag.value)){
            sp.innerHTML='密码不能为空';
            sp.className="error";
            return false;
        }else if(!reg2.test(txtPasswordTag.value)){
            sp.innerHTML='请输入6-12位密码';
            sp.className="error";
            return false;
        }
        sp.innerHTML='通过（✔）';
        sp.className='pass';
        return true;
    }
    
    /*密码相等验证*/
    function checkRepassword(){
        let txtRePasswordTag = document.querySelector('#txtRePassword');
        let txtPasswordTag = document.querySelector('#txtPassword');
        let sp=document.querySelector('#rePasswordErro');
        let reg1 = /^\w+$/ ;
        if(!reg1.test(txtPasswordTag.value)){
            sp.innerHTML='密码不能为空';
            sp.className="error";
            return false;
        }else if(txtPasswordTag.value!==txtRePasswordTag.value){
            sp.innerHTML='密码不相等！';
            sp.className="error";
            return false;
        }else{
            sp.innerHTML='通过（✔）';
            sp.className='pass';
        return true;
        }
      
    }
    /*中文验证*/
    function checkRealName(){
        let txtRealNameTag = document.querySelector('#txtRealName');
        let sp = document.querySelector('#realNameErro');
        let reg=/^[\u4e00-\u9fa5]{2,}$/;
        if(!reg.test(txtRealNameTag.value)){
            sp.innerHTML='请输入至少两位中文真实姓名！';
            sp.className="error";
            return false;
        }
        sp.innerHTML='通过（✔）';
        sp.className='pass';
        return true;

    }
    /*邮政编码验证*/
    function checkPostCode(){
        let txtPostCodeTag = document.querySelector('#txtPostCode');
        let sp = document.querySelector('#postCodeErro');
        let reg = /^[\d]{6}$/;
        if(!reg.test(txtPostCodeTag.value)){
            sp.innerHTML='请输入6位邮政编码'
            sp.className='error';
            return false;
        }
        sp.innerHTML='通过（✔）';
        sp.className='pass';
        return true;
    }
    /*邮箱验证*/
    function checktEmail(){
        let txtEmailTag = document.querySelector('#txtEmail');
        let sp = document.querySelector('#emailErro');
        let reg = /^\w+@\w{2,}.\w{2,3}$/;
        if(!reg.test(txtEmailTag.value)){
            sp.innerHTML='请输入正确的邮箱'
            sp.className='error';
            return false;
         }
        sp.innerHTML='通过（✔）';
        sp.className='pass';
        return true;
    }
    /*11位电话号码验证*/
    function checkTel(){
        let txtTelTag = document.querySelector('#txtTel');
        let sp = document.querySelector('#telErro');
        let reg = /^1\d{10}$/;
        if(!reg.test(txtTelTag.value)){
            sp.innerHTML='请输入11位电话号码';
            sp.className='error';
            return false;
        }
        sp.innerHTML='通过（✔）';
        sp.className='pass';
        return true;
    }
    /*身份证验证*/
    function checkIdentifiedNo(){
        let txtIdentifiedNoTag = document.querySelector('#txtIdentifiedNo');
        let sp = document.querySelector('#identifiedNoErro');
        let reg = /^([\d]{17}[\d])|(X|x)$/;
        if(!reg.test(txtIdentifiedNoTag.value)){
            sp.innerHTML='请输入正确的身份证';
            sp.className='error';
            return false;
        }
        sp.innerHTML='通过（✔）';
        sp.className='pass';
        return true;
    }
    /*验证所有，提交*/
    function checkAll(){
        let sp =document.querySelector('submitErro');
    if(checkIdentifiedNo()&&checkTel()&&checktEmail()&&checkPostCode()&&checkLoginId()&&checkPassword()&&checkRepassword()&&checkRealName()){
        sp.innerHTML='提交成功';
        sp.className='pass';
         return true;
    }else{
        sp.innerHTML='提交失败';
            sp.className='error';
            return false;
    }
         
       
    }

</script>
</head>
<body>
    <form action="" method="POST" id="f1">
        <table border="1px" width="400px">
            <tr>
                <td colspan="3">表单验证</td>
            </tr>
            <tr>
                <td>账号：</td>
                <td><input type="text" id="txtUloginId"></td>
                <td><span id="loginIdErro"></span></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" id="txtPassword"></td>
                <td><span id="passwordErro"></span></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" id="txtRePassword"></td>
                <td><span id="rePasswordErro"></span></td>
            </tr>
            <tr>
                <td>真实姓名：</td>
                <td><input type="text" id="txtRealName">
                <td><span id="realNameErro"></span></td>
            </tr>
            <tr>
                <td>邮政编码：</td>
                <td><input type="text" id="txtPostCode"></td>
                <td><span id="postCodeErro"></span></td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td><input type="text" id="txtEmail"></td>
                <td><span id="emailErro"></span></td>
            </tr>
            <tr>
                <td>电话：</td>
                <td><input type="text" id="txtTel">
                <td><span id="telErro"></span></td>
            </tr>
            <tr>
                <td>身份证：</td>
                <td><input type="text" id="txtIdentifiedNo"></td>
                <td><span id="identifiedNoErro"></span></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" id="submit" value="提交"></td>
                <td><span id="submitErro"></span></td>

            </tr>
            <tr>
                <td colspan="2"><input type="reset" id="reset" value="重置"></td>
                <td><span></span></td>

            </tr>
        </table>
    </form>
</body>
</html>

在这里插入图片描述

LLM(-¥-)
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript表单验证
阳光下的冷静的博客
01-06 3069
JavaScript表单验证： JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 JavaScript验证内容： 验证表单数据是否为空？ 验证输入是否是一个正确的email地址？ 验证日期是否输入正确？ 验证表单输入内容是否是为数字型？ 逐个分析JavaScript表单验证内容： 必填(或必选)项目 该验证用来检查用户是否已填写表单...
JavaScript 表单验证
01-19
JavaScript 表单验证 JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 表单数据经常需要使用 JavaScript 来验证其正确性： 验证表单数据是否为空？ 验证输入...
html的document.querySelector()使用
qq_36939013的博客
07-15 3683
HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持，也可以方便的获取DOM元素，语法跟jQuery类似。 获取文档中id=”container”的元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&...
javascript表单验证
lijie1025的博客
03-16 1862
正则表达式适用单个字符串来描述，匹配一系列符合某个句法规则的字符串搜索模式用某种模式去匹配一类字符串的公式通过使用正则表达式，可以：1.测试字符串内的模式。2.替换文本。3.从字符串中提取字符串。//字面量方式，其由包含在斜杆之间的模式组成，如下所示：//构造函数方式，调用RegExp对象的构造函数，如下所示：var regex=/ 正则规则 /;//调用方法判断是否满足要求var flag = regex.test( '内容' );
JavaScript表单验证和提交
hei_xiaomian的博客
03-24 3262
最近做java的时候用到了JavaScript表单。网上相关的教程很多，但大部分都不详细。 很多人学到最后都对form表单不是很熟悉，现在层出不穷的框架使得很多人觉得方便，也就更少地回顾基础知识了，但框架 W3school上面对于初学者展示的表单案例是这样的： <script> function validateForm() { var x = document.forms["my...
JavaScript表单基本验证
m0_63223374的博客
04-12 3559
JavaScript表单基本验证技术
JavaScript之表单验证
热门推荐
weixin_64938628的博客
03-06 1万+
前言：我们这一次讲的表单验证运用了前面几篇文章说讲的的内容，比之前的要难一些，我会在代码里以注释的形式详细的讲解。 目录 一.简单的表单验证 验证方式一: 验证方式二： 二.正则验证 一.正则的规则 内容 次数 二.正则的注意事项 三.二级联动 一.简单的表单验证 验证方式一: <html> <head> <meta charset="UTF-8"> <title>Title&...
JavaScript表单验证实现代码
12-10
JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 被 JavaScript 验证的这些典型的表单数据有： 用户是否已填写表单中的必填项目？ 用户输入的邮件地址是否...
常用javascript表单验证汇总
10-23
主要介绍了一些常用javascript表单验证，文章最后还附带了一个实践案例，以验证数字为例进行讲解，感兴趣的小伙伴们可以参考一下
AJAX+JavaScript表单验证
光羽住一
06-01 1935
AJAX表单验证 1.前端组件以及JS+AJAX完成表单数据的上传 <html> <head></head> <body> <fieldset> <div class="form-group"> <input class="form-control" placeholder="请输入用户名...
【Java 进阶篇】JavaScript 表单验证详解
繁依Fanyi的博客
10-19 619
在上面的示例中，我们使用alert函数来显示验证错误消息。然而，这并不是最好的用户体验，通常我们会希望将错误消息直接显示在页面上，以便用户更容易理解。为此，您可以使用 HTML 元素来显示错误消息，并根据验证结果显示或隐藏它们。
MATLAB实验一二 数值计算
最新发布
06-10
MATLAB实验一二 数值计算
Java毕业设计-ssm基于SSM的英语学习网站的设计与实现演示录像（高分期末大作业）.rar
06-10
Java毕业设计-ssm基于SSM的英语学习网站的设计与实现演示录像（高分期末大作业）
平安保险-智富人生A的计算
06-10
平安保险-智富人生A的计算

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值