html 简单的消息提示验证信息

- 日理万妓 2022-10-16 01:51 106阅读 0赞

<form class="form-horizontal" role="form" method="POST" action="/">
                    <div class="form-row-group with-icons">
                        <div class="form-row no-padding">
                            <i class="fa fa-mobile-phone"></i>
                            <input type="text" name="phone" class="form-element" pattern="[0-9]{11}"
                                   title="请输入11位有效手机号码"
                                   required="required" placeholder="请输入手机号码">
                        </div>
                        <div class="form-row no-padding">
                            <i class="fa fa-lock"></i>
                            <input type="password" name="password" class="form-element"
                                   title="请输入6位有效密码"
                                   pattern="[0-9]{6}" required="required" placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="form-divider"></div>
                    <div class="form-row">
                        <button type="submit" class="button circle block orange">点击登录
                        </button>
                    </div>
    
                    </form>

我们在html 的 input  标签中，添加两个属性值。

1、

pattern="[0-9]{6}"

2、

title="请输入6位有效密码"

这两个属性值会根据，属性值1 pattern 的条件，如果不满足条件1 ，那么会在页面提示 tital 信息。截图如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3OTg2ODM_size_16_color_FFFFFF_t_70][]

一些常用的，匹配

常用的正则表达式
    pattern的用法都一样，这里不再嗦各种详细写法了，只是列出来一些常用的正则就好了：
    信用卡 [0-9]{13,16}
    银联卡 ^62[0-5]/d{13,16}$
    Visa: ^4[0-9]{12}(?:[0-9]{3})?$
    万事达：^5[1-5][0-9]{14}$
    QQ号码： [1-9][0-9]{4,14}
    手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])/d{8}$
    身份证：^([0-9]){7,18}(x|X)?$
    密码：^[a-zA-Z]/w{5,17}$ 字母开头，长度在6~18之间，只能包含字母、数字和下划线
    强密码：^(?=.*/d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间
    7个汉字或14个字符：^[/u4e00-/u9fa5]{1,7}$|^[/dA-Za-z_]{1,14}$

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3OTg2ODM_size_16_color_FFFFFF_t_70]: /images/20221014/e984323eefd547339b40a588c1e516dd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，106人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML + CSS + JavaScript 实现注册页面信息验证详细教程（表单验证）

>>> 本文介绍使用HTML + CSS + JavaScript 实现注册页面信息验证的详细方法。完整代码见文章末尾。要求创建一个注册页面，如下图。 ![ae6

╰半橙微兮°/ 2024年03月22日 16:08/ 0 赞/ 44 阅读

相关 js 简单的消息提示框

简介：有时候要在页面上显示消息，用alert()，体验不是很友好，每次要手动关闭，这里用js写一个效果： ![888c45db9508413a8696706769a9

迷南。/ 2023年10月13日 21:38/ 0 赞/ 47 阅读

相关简单验证码生成（基于HTML+Servlet）

目录 1.需求介绍 2.代码实现 3.运行结果 1.需求介绍本文是一个基于Servlet+HTML实现的简单的验证码生

叁歲伎倆/ 2023年10月07日 11:14/ 0 赞/ 37 阅读

相关 php提示框代码,HTML实现简单的提示框

本文我们将和大家分享HTML实现简单的提示框，由于项目中需要一个简单的提示框，就是鼠标放上去，可以提示相关信息，引用第三方的比较麻烦，所以，这里封装了一个很简单的HTML方法。

ゞ浴缸里的玫瑰/ 2022年11月19日 01:25/ 0 赞/ 228 阅读

相关 html 简单的消息提示验证信息

<form class="form-horizontal" role="form" method="POST" action="/">

- 日理万妓/ 2022年10月16日 01:51/ 0 赞/ 107 阅读

相关消息中心 html,消息中心5.html

消息中心 .qqs\_bnb\{ left: 66.6% \} @我的评论赞 ![mv.jpg][] username 1小时前点赞 | @我的用户名

刺骨的言语ヽ痛彻心扉/ 2022年10月05日 15:57/ 0 赞/ 164 阅读

相关 html固定在屏幕右下角的信息（提示信息，广告）

1.截图： ![弹框图片][SouthEast] 2.css： .warning-msg { display:block; bottom:0px; right:

浅浅的花香味﹌/ 2022年06月16日 04:22/ 0 赞/ 437 阅读

相关 springmvc使用JSR303 hibernate验证@valid及定制提示消息

目录： > > 一：添加jar包 > > > 二：添加注解 > > >

快来打我*/ 2022年05月22日 12:04/ 0 赞/ 254 阅读

相关 easyui的form表单验证提示信息改为中文

默认情况下，我们使用easyui的form表单验证，验证失败，提示信息是英文。 ![20181216120310519.png][] 这里可以对我们使用的插件默认属性做设置

太过爱你忘了你带给我的痛/ 2022年04月04日 07:12/ 0 赞/ 463 阅读

相关 html 鼠标mouseover信息提示事件

一、使用背景：html页面中当鼠标指针位于元素上方时，弹出提示信息；二、添加弹出信息样式： <style> .pop-box \{ z-index

- 日理万妓/ 2022年04月03日 04:00/ 0 赞/ 750 阅读