表单验证

最新推荐文章于 2024-04-16 11:57:14 发布
最新推荐文章于 2024-04-16 11:57:14 发布
阅读量114 收藏
点赞数
分类专栏： 实例代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxkzhang/article/details/100187771
版权

h5与js简单的表单验证1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style>
        span{
            color: red;
        }
    </style>
    <script>
        window.onload = function () {
            document.getElementById("form").onsubmit = function(){
                return checkUser() && checkPassword() && checkRePassword;
            }

            document.getElementById("user").onblur = checkUser;
            document.getElementById("password").onblur = checkPassword;
            document.getElementById("repassword").onblur = checkRePassword;
        }

        //定义公共的提示方法
        function showTip(errorSpanId,text) {
            document.getElementById(errorSpanId).innerHTML=text;
        }
        //定义公共的提示信息隐藏的方法
        function hideTip(errorSpanId) {
            document.getElementById(errorSpanId).innerHTML="";
        }

        //获取元素焦点
        function focus(objId) {
            document.getElementById(objId).focus();
        }

        function checkUser() {
            var firstObj = "";
            //1.获取用户名的值
            var username = document.getElementById("user").value;
            //2.定义正则表达式
            var reg_username = /^\w{6,12}$/;
            //3.判断值是否符合正则的规则
            var user = reg_username.test(username);
            if(user){
                hideTip("span_user");
            }else{
                showTip("span_user","用户格式不正确");
                firstObj = firstObj =="" ? "user":firstObj;
            }
            if(firstObj != ""){
                focus(firstObj);
                return false;
            }
            return true;
        }
        function checkPassword() {
            var firstObj = "";
            //验证密码
            var password = document.getElementById("password").value;
            //2.定义正则表达式
            var reg_password = /^\w{6,12}$/;
            //3.判断值是否符合正则的规则
            var password = reg_password.test(password);
            if(password){
                hideTip("span_password");
            }else{
                showTip("span_password","用户密码格式不正确");
                firstObj = firstObj =="" ? "password":firstObj;
            }
            if(firstObj != ""){
                focus(firstObj);
                return false;
            }
            return true;
        }

        function checkRePassword() {
            var firstObj = "";
            //验证密码
            var repassword = document.getElementById("repassword").value;
            var  password = document.getElementById("password").value;

            if(password == repassword){
                hideTip("span_repassword");
            }else{
                showTip("span_repassword","密码和确认密码不一致");
                firstObj = firstObj =="" ? "repassword":firstObj;
            }
            if(firstObj != ""){
                focus(firstObj);
                return false;
            }
            return true;
        }


    </script>

</head>
<body>
<form action="#" id="form" method="get">
    <table width="700px" height="400px" align="center" cellpadding="0" cellspacing="0" border="1px">
        <tr height="40px">
            <td colspan="2" style="text-align: center">
                <font style="font-weight: bold;color: green">用户注册</font>
            </td>
        </tr>

        <tr>
            <td class="t_01">用户名</td>
            <td class="t_02">
                <input type="text" name="user" id="user">
                <span id="span_user"></span>
            </td>
        </tr>

        <tr>
            <td class="t_01">密码</td>
            <td class="t_02">
                <input type="password" name="password" id="password">
                <span id="span_password"></span>
            </td>
        </tr>

        <tr>
            <td class="t_01">确认密码</td>
            <td class="t_02">
                <input type="password" name="repassword" id="repassword">
                <span id="span_repassword"></span>
            </td>
        </tr>

        <tr>
            <td class="t_01">Emaile</td>
            <td class="t_02">
                <input type="text" name="email" id="email">
                <span id="span_email"></span>
            </td>
        </tr>

        <tr>
           <td colspan="2" style="text-align: center; ">
               <input type="submit" value="注册">
           </td>
        </tr>
    </table>
</form>
</body>
</html>

在这里插入图片描述

h5与js简单的表单验证1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
<style>
    *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    body{
        background: url("img/register_bg.png") no-repeat center;
        padding-top: 25px;
    }

    .rg_layout{
        width: 900px;
        height: 500px;
        border: 8px solid #EEEEEE;
        background-color: white;
        /*让div水平居中*/
        margin: auto;
    }

    .rg_left{
        /*border: 1px solid red;*/
        float: left;
        margin: 15px;
    }
    .rg_left > p:first-child{
        color:#FFD026;
        font-size: 20px;
    }

    .rg_left > p:last-child{
        color:#A6A6A6;
        font-size: 20px;

    }


    .rg_center{
        float: left;
       /* border: 1px solid red;*/

    }

    .rg_right{
        /*border: 1px solid red;*/
        float: right;
        margin: 15px;
    }

    .rg_right > p:first-child{
        font-size: 15px;

    }
    .rg_right p a {
        color:pink;
    }

    .td_left{
        width: 100px;
        text-align: right;
        height: 45px;
    }
    .td_right{
        padding-left: 50px ;
    }

    #username,#password,#email,#name,#tel,#birthday,#checkcode{
        width: 251px;
        height: 32px;
        border: 1px solid #A6A6A6 ;
        /*设置边框圆角*/
        border-radius: 5px;
        padding-left: 10px;
    }
    #checkcode{
        width: 110px;
    }

    #img_check{
        height: 32px;
        vertical-align: middle;
    }

    #btn_sub{
        width: 150px;
        height: 40px;
        background-color: #FFD026;
        border: 1px solid #FFD026 ;
    }
    .error{
        color:red;
    }
    #td_sub{
        padding-left: 150px;
    }

</style>
<script>

    /*
        分析：
            1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
                如果都为true，则监听器方法返回true
                如果有一个为false，则监听器方法返回false

            2.定义一些方法分别校验各个表单项。
            3.给各个表单项绑定onblur事件。



     */

    window.onload = function(){
        //1.给表单绑定onsubmit事件
        document.getElementById("form").onsubmit = function(){
            //调用用户校验方法   chekUsername();
            //调用密码校验方法   chekPassword();
            //return checkUsername() && checkPassword();

            return checkUsername() && checkPassword();
        }

        //给用户名和密码框分别绑定离焦事件
        document.getElementById("username").onblur = checkUsername;
        document.getElementById("password").onblur = checkPassword;
    }

    //校验用户名
    function checkUsername(){
        //1.获取用户名的值
        var username = document.getElementById("username").value;
        //2.定义正则表达式
        var reg_username = /^\w{6,12}$/;
        //3.判断值是否符合正则的规则
        var flag = reg_username.test(username);
        //4.提示信息
        var s_username = document.getElementById("s_username");

        if(flag){
            //提示绿色对勾
            s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
        }else{
            //提示红色用户名有误
            s_username.innerHTML = "用户名格式有误";
        }
        return flag;
    }

    //校验密码
    function checkPassword(){
        //1.获取用户名的值
        var password = document.getElementById("password").value;
        //2.定义正则表达式
        var reg_password = /^\w{6,12}$/;
        //3.判断值是否符合正则的规则
        var flag = reg_password.test(password);
        //4.提示信息
        var s_password = document.getElementById("s_password");

        if(flag){
            //提示绿色对勾
            s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
        }else{
            //提示红色用户名有误
            s_password.innerHTML = "密码格式有误";
        }
        return flag;
    }



</script>
</head>
<body>

<div class="rg_layout">
    <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>

    </div>

    <div class="rg_center">
        <div class="rg_form">
            <!--定义表单 form-->
            <form action="#" id="form" method="get">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right">
                            <input type="text" name="username" id="username" placeholder="请输入用户名">
                            <span id="s_username" class="error"></span>
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right">
                            <input type="password" name="password" id="password" placeholder="请输入密码">
                            <span id="s_password" class="error"></span>
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="tel">手机号</label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label>性别</label></td>
                        <td class="td_right">
                            <input type="radio" name="gender" value="male" checked> 男
                            <input type="radio" name="gender" value="female"> 女
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="birthday">出生日期</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="checkcode" >验证码</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                            <img id="img_check" src="img/verify_code.jpg">
                        </td>
                    </tr>


                    <tr>
                        <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td>
                    </tr>
                </table>

            </form>


        </div>

    </div>

    <div class="rg_right">
        <p>已有账号?<a href="#">立即登录</a></p>
    </div>


</div>


</body>
</html>

在这里插入图片描述

zxkzhang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Spring Boot 表单验证
weixin_44976692的博客
07-21 1万+
表单验证是指在用户提交表单数据之前，对数据进行检查，确保其符合预期的格式和规则。例如，检查邮箱地址是否有效、密码是否符合长度要求、必填字段是否为空等。通过表单验证，可以提高数据的质量，增强应用程序的安全性。有时候，内置的验证注解不能满足我们的需求，我们可以创建自定义验证器。例如，我们可以创建一个自定义验证器，验证用户名是否已被使用。String message() default "用户名已被使用";Class
JavaScript进行表单检验
qq_45736175的博客
08-22 464
<!-- 需求：实现用户名和密码的校验 *如果满足正则表达式就提交表单，并在光标移出输入框时给出成功的提示 *如果不满足就正则表达式，当光标移出输入框时就会自动给出警告 分析： 1.form表单所以就得用onsubmit事件，给出返回值 2.构造两个方法，一个是名字输入框的，即username；另一个是password输入框的 3.在方法里面，先获取输入框的内容 ...
PHP表单验证
x-2010的笔记
07-03 4531
这里将介绍如何使用PHP验证客户端提交的表单数据。在处理PHP表单时需要考虑安全性，这里将展示PHP表单数据安全处理，为防止黑客以及垃圾信息就需要对表单进行数据安全验证，实例介绍的HTML表单中包含以下输入字段：必须与可选文本字段，单选按钮，及提交按钮：form_verify.php:&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &l...
15 php学习：表单验证
最新发布
百锦再的博客
04-16 6万+
因此，在密码验证规则中，需要综合考虑密码的长度要求、复杂性要求、确认验证、安全策略等方面的内容，以确保密码的安全性和用户友好性。通过有效的唯一性检查方法，可以确保系统数据的准确性和完整性，避免重复数据的存在，提高系统的性能和安全性。通过日期验证，可以确保用户输入的日期符合指定的格式和范围要求，从而提高数据的准确性和系统的安全性。表单验证在网页和应用程序开发中起着至关重要的作用，其主要目的是确保用户输入的数据符合预期的格式和规则，以提升用户体验、数据准确性和系统安全性。
javascript表单验证
lijie1025的博客
03-16 1933
正则表达式适用单个字符串来描述，匹配一系列符合某个句法规则的字符串搜索模式用某种模式去匹配一类字符串的公式通过使用正则表达式，可以：1.测试字符串内的模式。2.替换文本。3.从字符串中提取字符串。//字面量方式，其由包含在斜杆之间的模式组成，如下所示：//构造函数方式，调用RegExp对象的构造函数，如下所示：var regex=/ 正则规则 /;//调用方法判断是否满足要求var flag = regex.test( '内容' );
angular表单验证
yanyi24的博客
04-08 3924
表单验证 通常，我们都需要对用户的表单输入做验证，以保证数据的整体质量。 Angular也有两种验证表单的形式： 使用属性验证，用于模板驱动表单； 使用验证器函数进行验证，用于响应式表单。 验证器（Validator）函数 验证器函数可以是同步函数，也可以是异步函数。 同步验证器：接受控件实例，然后返回验证错误信息或 null。在实例化一个 FormControl时把它作为构造函数的第二个参数传进去； 异步验证器 ：接受实例并返回一个 Promise或 Observable，稍后会发出一组验证错误或
jQuery实现表单验证
生有涯，知无涯
04-24 4万+
1.基于html表单，利用jQuery实现表单验证功能。 2.html基本结构和样式： 3.html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h...
vant表单验证
weixin_37863088的博客
11-15 1935
vant表单验证validator: (value) =>{true or false}
JavaScript表单验证
weixin_52629592的博客
06-14 1万+
表单验证是JavaScript的高级选项之一.我们可以通过JavaScript在网页中对即将送往服务器的HTML表单中的输入数据进行验证.如果所输入内容与所需不符,我们就在页面中进行提示.这样就使得我们不用频繁的与服务器进行交互,减少了IO的频率,提高了效率.在表单验证中,我们通常使用如下的验证功能:验证用户名与密码为指定格式在验证用户名与密码时,我们通常验证用户名与密码不能为空,用户名和密码必须在指定长度范围内,用户名和密码由数字和字母组成(使用正则表达式)等等验证单选框所选内容最常见的验证单选框就是验证
laravel表单验证
J20020212的博客
03-10 1847
laravel表单验证的两种方法 文章目录`laravel`表单验证的两种方法方法1：直接在控制器中写方法方法2:创建请求文件（推荐） 方法1：直接在控制器中写方法 直接在需要用到表单验证的控制器里面编写代码 如下所示在indexController控制器中 用show方法接收到表单传过来的数据，进行验证 //indexController <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Illumin
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，主要关注的是动态表单验证以及表单元素的增删操作。下面我们将详细探讨这些知识点。 1. Vue.js动态表单验证： Vue.js允许开发者通过...
JavaScript实现仿网易通行证表单验证
10-24
下面，我将从这几个方面详细介绍表单验证的具体实现方法和知识点。 首先，表单验证通常指的是在用户填写完信息并提交之前，通过编写脚本或使用HTML5的内建验证属性来检查用户输入的数据是否符合要求的过程。这样做...
浅谈关于iview表单验证的问题
10-17
iview中的表单验证是其组件库中不可或缺的一部分，尤其在处理数据提交前的合法性校验中扮演了重要角色。本文主要围绕iview表单验证过程中可能出现的问题进行探讨，并提供了一些解决方案。 首先，表单验证步骤的准确...
Bootstrap新闻页面设计
zxkzhang的博客
09-04 2956
1.必须写的头, 以及引入的文件 <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-...
用户登录案例需求：
zxkzhang的博客
08-30 1330
用户登录案例需求： 1.编写login.html登录页面 username & password 两个输入框 2.使用Druid数据库连接池技术,操作mysql，day14数据库中user表 3.使用JdbcTemplate技术封装JDBC 4.登录成功跳转到SuccessServlet展示：登录成功！用户名,欢迎您 5.登录失败跳转到FailServlet展示：登录失败，用户名或密码错...
小米商城轮播图
zxkzhang的博客
09-03 1168
要求 1.自动播放 2.鼠标移入暂停播放,鼠标移除回复播放 3.点击左右箭头鼠标,切换图片 4.点击右下方源点,切换图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <scri...
案例：文件下载需求： 1. 页面显示超链接 2. 点击超链接后弹出下载提示框 3. 完成图片文件下载
zxkzhang的博客
08-30 976
案例： * 文件下载需求： 1. 页面显示超链接 2. 点击超链接后弹出下载提示框 3. 完成图片文件下载 * 分析： 1. 超链接指向的资源如果能够被浏览器解析，则在浏览器中展示，如果不能解析，则弹出下载提示框。不满足需求 2. 任何资源都必须弹出下载提示框 3. 使用响应头设置资源的打开方式： * content-disposition:attachment;filenam...
JS表单验证实例集合
"JS 表单验证大全是一个全面收集了JavaScript进行表单验证的各种方法的集合，适合开发者在处理用户输入时参考使用。" 在网页开发中，表单验证是必不可少的一部分，它确保用户提交的数据符合预期的格式，从而防止...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值