设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 请问为什么无法添加星号提示呢？
返回列表 发新帖
查看: 1890|回复: 4

[技术交流] 请问为什么无法添加星号提示呢？

[复制链接]
krpa
发表于 2018-8-21 15:02:47 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
写了个表单，希望在表单后面加个星号显示必填项，但是写完之后刷新发现没改变，是为啥？

html代码
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <meta name="viewpoint" content="width=device-width,initial-scale=1.0/>
  6.         <title>表单验证</title>
  7.         <script src="../jquery-3.3.1.js"></script>
  8.         <link rel="stylesheet" type="text/css" href="form.css"/>
  9.         <link rel="stylesheet" type="text/javascript" href="form.js"/>
  10.         
  11.     </head>
  12.    
  13.     <body>
  14.         <!--<div id="f1">-->
  15.             <form method="post" action="">
  16.                 <div class="int">
  17.                     <label for="username">用户名：</label>
  18.                     <input type="text" id="username" class="required"/>
  19.                 </div>
  20.                 <div class="int">
  21.                     <label for="email">邮箱：</label>
  22.                     <input type="text" id="email" class="required"/>
  23.                     
  24.                 </div>
  25.                 <div class="int">
  26.                     <label for="personinfo">个人资料：</label>
  27.                     <input type="text" id="personinfo"/>
  28.                 </div>
  29.                 <div class="sub">
  30.                     <input type="submit" value="提交" id="send"/><input type="submit" value="重置" id="res"/>
  31.                 </div>
  32.             </form>

  34.         <!--</div>-->
  35.     </body>
  36. </html>
复制代码


jq代码
  1. <script type="text/javascript">
  2.     //必填星号提示
  3.     $("form:input.required").each(function(){
  4.         var $required=$("<strong class='high'>*</strong>");//创建元素
  5.         $(this).parent().append($required);//追加到文档中
  6.         
  7.     });
  8.    
  9.     $("form:input").blur(function(){//为表单元素添加失去焦点事件
  10.         var $parent=this.parent();
  11.         $parent.find(".formtips").remove();//删除以前的提醒元素
  12.         //验证用户名
  13.         if($(this).is("#username")){
  14.             if(this.value==""||this.value.length<6){
  15.                 var errorMsg="请输入至少6位的用户名";
  16.                 $parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
  17.             }else{
  18.                 var okMsg="输入正确";
  19.                 $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
  20.             }
  21.         }
  22.         //验证邮箱
  23.         if($(this).is("#email")){
  24.             if(this.value==""||(this.value!=""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
  25.                 var errorMsg="请输入正确的邮箱地址";
  26.                 $parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
  27.             }else{
  28.                 var okMsg="输入正确";
  29.                 $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
  30.             }
  31.         }
  32.     }).keyup(function(){
  33.         $(this).triggerHandler("blur");
  34.     }).focus(function(){
  35.         $(this).triggerHandler("blur");
  36.     });
  37.     //判断是否可提交表单
  38.     $("#send").click(function(){
  39.         $("form.required:input").trigger("blur");
  40.         var numErr=$("form.onError").length;
  41.             if(numErr){
  42.                 return false;
  43.             }
  44.             alert("注册成功");
  45.     });
  46.    
  47.    
  48. </script>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

PythonWorld
发表于 2018-8-21 15:30:01 | 显示全部楼层
源文件能否发我一份么
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

krpa
 楼主| 发表于 2018-8-21 20:05:57 | 显示全部楼层
PythonWorld 发表于 2018-8-21 15:30
源文件能否发我一份么

HTML源码：
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <meta name="viewpoint" content="width=device-width,initial-scale=1.0/>
  6.         <title>表单验证</title>
  7.         <script src="../jquery-3.3.1.js"></script>
  8.         <link rel="stylesheet" type="text/css" href="form.css"/>
  9.         <link rel="stylesheet" type="text/javascript" href="form.js"/>
  10.         
  11.     </head>
  12.    
  13.     <body>
  14.         <!--<div id="f1">-->
  15.             <form method="post" action="">
  16.                 <div class="int">
  17.                     <label for="username">用户名：</label>
  18.                     <input type="text" id="username" class="required"/>
  19.                 </div>
  20.                 <div class="int">
  21.                     <label for="email">邮箱：</label>
  22.                     <input type="text" id="email" class="required"/>
  23.                     
  24.                 </div>
  25.                 <div class="int">
  26.                     <label for="personinfo">个人资料：</label>
  27.                     <input type="text" id="personinfo"/>
  28.                 </div>
  29.                 <div class="sub">
  30.                     <input type="submit" value="提交" id="send"/><input type="submit" value="重置" id="res"/>
  31.                 </div>
  32.             </form>

  34.         <!--</div>-->
  35.     </body>
  36. </html>
复制代码



jQ源码：
  1. <script type="text/javascript">
  2.     //必填星号提示
  3.     $("form:input.required").each(function(){
  4.         var $required=$("<strong class='high'>*</strong>");//创建元素
  5.         $(this).parent().append($required);//追加到文档中
  6.         
  7.     });
  8.    
  9.     $("form:input").blur(function(){//为表单元素添加失去焦点事件
  10.         var $parent=this.parent();
  11.         $parent.find(".formtips").remove();//删除以前的提醒元素
  12.         //验证用户名
  13.         if($(this).is("#username")){
  14.             if(this.value==""||this.value.length<6){
  15.                 var errorMsg="请输入至少6位的用户名";
  16.                 $parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
  17.             }else{
  18.                 var okMsg="输入正确";
  19.                 $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
  20.             }
  21.         }
  22.         //验证邮箱
  23.         if($(this).is("#email")){
  24.             if(this.value==""||(this.value!=""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
  25.                 var errorMsg="请输入正确的邮箱地址";
  26.                 $parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
  27.             }else{
  28.                 var okMsg="输入正确";
  29.                 $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
  30.             }
  31.         }
  32.     }).keyup(function(){
  33.         $(this).triggerHandler("blur");
  34.     }).focus(function(){
  35.         $(this).triggerHandler("blur");
  36.     });
  37.     //判断是否可提交表单
  38.     $("#send").click(function(){
  39.         $("form.required:input").trigger("blur");
  40.         var numErr=$("form.onError").length;
  41.             if(numErr){
  42.                 return false;
  43.             }
  44.             alert("注册成功");
  45.     });
  46.    
  47.    
  48. </script>
复制代码



css：
  1. .int{
  2.     background:;
  3.     border:none;
  4.     width:300px;
  5.     height:100px;
  6. }
  7. label{
  8.     cursor:pointer;
  9.     display:inline-block;
  10.     text-align:right;
  11.     float:left;
  12.     vertical-align:top;
  13.     width:10em;
  14.     margin-right:1em;
  15.    
  16. }
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

PythonWorld
发表于 2018-8-22 10:10:24 | 显示全部楼层
krpa 发表于 2018-8-21 20:05
HTML源码：

我发现楼主写的js都没执行，楼主看看是否引入的js库是否支持
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

krpa
 楼主| 发表于 2018-8-22 10:18:49 | 显示全部楼层
PythonWorld 发表于 2018-8-22 10:10
我发现楼主写的js都没执行，楼主看看是否引入的js库是否支持

好的，谢谢，我看看哈
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-5-1 14:05

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表