表单验证-输入内容后立即做出判断
整体思路：
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>
