表单验证（实时判断）

最新推荐文章于 2021-11-17 12:20:31 发布

ICY___

最新推荐文章于 2021-11-17 12:20:31 发布

阅读量2k

点赞数 3

分类专栏： ICY___的js进阶文章标签：表单验证

本文链接：https://blog.csdn.net/ICY___/article/details/86670844

版权

这篇博客介绍了如何实现提供更好用户体验的表单验证，通过实时判断用户输入数据的正确性，作为正则表达式应用的延伸。文章展示了具体的实现效果和相关代码，部分方法为首次使用，作者期待读者的反馈和建议。

摘要由CSDN通过智能技术生成

上次的正则版表单验证的主要用意是为了正则表达式的应用，而这次的表单验证提供的更加完善的用户体验（实时判断了用户的输入数据正确与否），它是上个版本的延伸。

实现效果：

相应代码：

<!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>
    <link rel="stylesheet" href="./css/iconfont.css">
    <!-- 字体图标的引入 -->
    <style>
        /* css样式  和之前的正则版表单验证一样，实际上这个是先前写的*/
        #formuser{
            display: block;
            margin: 0 auto;
            width: 400px;
        }
        .form_user>li{
            position: relative;
            list-style: none;
            height: 50px;
            width: 400px;
            border: 1px solid gray;
            border-radius: 5px;
            margin: 40px 0;
        }
        .form_user>li>input{
            width: 378px;
            height: 48px;
            border-style: none;
            outline: none;
            margin-left: 1px;
            padding-left: 20px;
            color: black;
            font-size: 20px;
        }
        .tel{
            position: relative;
            border-style: none !important;
        }
        .usertelnum{
            width: 150px;
            height: 50px;
            border: 1px solid grey;
            border-radius: 5px;
            line-height: 50px;
            position: relative;
            float: left;
        }
        .usertelnum>input{
            position: absolute;
            border-style: none;
            outline: none;
            top: 0px;
            left: 1px;
            width: 120px;
            height: 48px;
            padding-left: 20px;
            font-size: 20px;
        }
        #icon{
            position: absolute;
            top: 0;
            right: 10px;
            color: gray;
        }
        .show_phone{
            float: right;
            width: 210px !important;
            height: 50px !important;
            border-radius: 5px;
            border: 1px solid silver !important;
            font-size: 20px;
            padding-left: 20px;

最低0.47元/天解锁文章

ICY___

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
4
评论
表单验证（实时判断）

上次的正则版表单验证的主要用意是为了正则表达式的应用，而这次的表单验证提供的更加完善的用户体验（实时判断了用户的输入数据正确与否），它是上个版本的延伸。实现效果：相应代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;!-- 此表单虽然样式比较简单，但功能实现还是比较复杂的，不同于一般的一步性验证而是将分步验证和最终验证结合在一...
复制链接

扫一扫