表达验证（正则版）

最新推荐文章于 2022-10-09 11:17:44 发布

ICY___

最新推荐文章于 2022-10-09 11:17:44 发布

阅读量527

点赞数

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

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

版权

利用正则表达式表达式，可以充分的实现表单验证的数据格式的正确性验证，且从入门来看，正则表达式比较好学，（往深说就不一定了），下面的案例，将告诉你如何利用正则来实现表单验证。

实现效果：

代码如下：

<!DOCTYPE html>
<html>
<!-- 总体思想：利用最终的验证事件进行一次验证，也就是提交的时候验证各个文本框之
间的数据格式是否正确，
    不正确不提交表单，并提示相应错误，直到能输入对格式，进行提交 -->
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/iconfont.css" />
    <!-- 调用字体图标文件的css样式 -->
    <style>
        /* 表单提交的样式 */
        #formuser {
            display: block;
            margin: 0 auto;
            width: 400px;
        }

        .form_user > li {
            list-style: none;
            height: 50px;
            width: 400px;
            border: 1px solid silver;
            border-radius: 5px;
            position: relative;
            margin: 40px 0;
        }

        .form_user > li.litxt > input {
            margin-left: 1px;
            width: 378px;
            height: 48px;
            border-style: none;
            outline: none;
            font-size: 20px;
            color: black;
            padding-left: 20px;

        }

        .tel {
            position: relative;
            border-style: none !important;
        }

        .usertelno {
            width: 150px;
            height: 50px;
            border: 1px solid silver;
            border-radius: 5px;
            line-height: 50px;
            position: relative;
            float: left;
        }

        .usertelno > input {
            position: absolute;
            top: 0;
            left: 1px;
            width: 120px;
            height: 48px;
            padding-left: 20px;
            border-style: none;
            font-size: 20px;
            outline: none;
        }

        #icon {
            position: absolute;
            right: 10px;
            top: 0;
            z-index: 2;
            color: gray;
        }

        .ph {
            float: right;
            width: 210px;
            height: 50px;
            border-radius: 5px;
            border: 1px solid silver;
            font-size: 20px;

最低0.47元/天解锁文章

ICY___

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表达验证（正则版）

利用正则表达式表达式，可以充分的实现表单验证的数据格式的正确性验证，且从入门来看，正则表达式比较好学，（往深说就不一定了），下面的案例，将告诉你如何利用正则来实现表单验证。实现效果：代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;!-- 总体思想：利用最终的验证事件进行一次验证，也就是提交的时候验证各个文本框之间的数据格式是否正确，...
复制链接

扫一扫