表单验证-输入内容后立即做出判断

最新推荐文章于 2021-12-25 14:30:44 发布

Dorothy1017

最新推荐文章于 2021-12-25 14:30:44 发布

阅读量689

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ys199610/p/11549417.html

版权

整体思路：

1.确定好要输入的内容的盒子（input，或模态框，h5）

2.设置错误信息的内容和样式(css)，**注意刚开始的时候错误信息的内容为隐藏状态的

3.表单验证，当输入内容不符合正则表达式，错误信息才被显示出来

代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表单验证</title>
 6     <!-- 第三方库iconfont,引入绿色对号 -->
 7     <link rel="stylesheet" href="https://at.alicdn.com/t/font_1397734_68oe7isrop5.css">
 8     <!-- jQuery引入 -->
 9     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
10 </head>
11 <!-- 样式表 -->
12 <style>
13     /*错误提示信息隐藏*/
14     #root .err{
15         visibility: hidden;
16         /* 用visibility属性是想把错误信息留出来，避免因为错误信息的弹出，模态框被拉长
17         使用display:none;也可以 */
18     }
19     /*绿色对号隐藏*/
20     #root i {
21         display: none;
22     }
23 </style>
24 <!-- /样式表 -->
25 <!-- 内容框 -->
26 <body>
27     <div id="root">
28         请输入内容：<input  type="text">
29         <!-- 输入信息正确，弹出的绿色对号 -->
30          <i style="font-size: 26px;color: green;" class="iconfont icon-zhengque1"></i>
31         <br>
32         <!-- 输入信息错误显示出的红色错误信息 -->
33         <span class="err" style="color: red">请输入至少一个字母</span>
34     </div>
35 </body>
36 <!-- /内容框 -->
37 <!-- js功能 -->
38 <script>
39     $(function(){
40         // 为input标签绑定键盘抬起监听事件
41         $("#root input").keyup(function(){
42             // 正则表达式
43             var pattern= /[a-zA-Z]{1,}/
44             // 获取当前输入框里输入的内容
45             var c = $(this).val();
46             // 判断输入框的内容是否符合正则表达式的标准，如果符合返回true，不符合返回false
47             var exp =pattern.test(c);
48             // 输入内容符合正则表达式的要求
49             if(exp){
50                 // 代表正确的绿色对号显示出来
51                 $("#root i").css("display","block");
52                 //错误提示信息不显示
53                 $("#root span").addClass("err");
54             // 输入内容不符合正则表达式的要求
55             }else{
56                 // 绿色对号被隐藏
57                 $("#root i").css("display","none");
58                 //错误提示信息显示
59                 $("#root span").removeClass("err");
60             }
61         });
62     });
63 </script>
64 <!-- /js功能 -->
65 </html>

转载于:https://www.cnblogs.com/ys199610/p/11549417.html

Dorothy1017

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
表单验证-输入内容后立即做出判断

整体思路：1.确定好要输入的内容的盒子（input，或模态框，h5）2.设置错误信息的内容和样式(css)，**注意刚开始的时候错误信息的内容为隐藏状态的3.表单验证，当输入内容不符合正则表达式，错误信息才被显示出来代码如下： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head>...
复制链接

扫一扫