请问为什么无法添加星号提示呢？,Web开发,技术交流,鱼C论坛

krpa 发表于 2018-8-21 15:02:47

请问为什么无法添加星号提示呢？

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

html代码
<!DOCTYPE HTML>
<html>
<head>
   <meta charset="utf-8"/>
   <meta name="viewpoint" content="width=device-width,initial-scale=1.0/>
   <title>表单验证</title>
   <script src="../jquery-3.3.1.js"></script>
   <link rel="stylesheet" type="text/css" href="form.css"/>
   <link rel="stylesheet" type="text/javascript" href="form.js"/>

</head>

<body>
   
         <form method="post" action="">
            <div class="int">
               <label for="username">用户名：</label>
               <input type="text" id="username" class="required"/>
            </div>
            <div class="int">
               <label for="email">邮箱：</label>
               <input type="text" id="email" class="required"/>

            </div>
            <div class="int">
               <label for="personinfo">个人资料：</label>
               <input type="text" id="personinfo"/>
            </div>
            <div class="sub">
               <input type="submit" value="提交" id="send"/><input type="submit" value="重置" id="res"/>
            </div>
         </form>

   
</body>
</html>

jq代码
<script type="text/javascript">
//必填星号提示
$("form:input.required").each(function(){
   var $required=$("<strong class='high'>*</strong>");//创建元素
   $(this).parent().append($required);//追加到文档中

});

$("form:input").blur(function(){//为表单元素添加失去焦点事件
   var $parent=this.parent();
   $parent.find(".formtips").remove();//删除以前的提醒元素
   //验证用户名
   if($(this).is("#username")){
         if(this.value==""||this.value.length<6){
            var errorMsg="请输入至少6位的用户名";
            $parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
         }else{
            var okMsg="输入正确";
            $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
         }
   }
   //验证邮箱
   if($(this).is("#email")){
         if(this.value==""||(this.value!=""&&!/.+@.+\.{2,4}$/.test(this.value))){
            var errorMsg="请输入正确的邮箱地址";
            $parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
         }else{
            var okMsg="输入正确";
            $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
         }
   }
}).keyup(function(){
   $(this).triggerHandler("blur");
}).focus(function(){
   $(this).triggerHandler("blur");
});
//判断是否可提交表单
$("#send").click(function(){
   $("form.required:input").trigger("blur");
   var numErr=$("form.onError").length;
         if(numErr){
            return false;
         }
         alert("注册成功");
});

</script>

PythonWorld 发表于 2018-8-21 15:30:01

源文件能否发我一份么

krpa 发表于 2018-8-21 20:05:57

PythonWorld 发表于 2018-8-21 15:30
源文件能否发我一份么

HTML源码：
<!DOCTYPE HTML>
<html>
<head>
   <meta charset="utf-8"/>
   <meta name="viewpoint" content="width=device-width,initial-scale=1.0/>
   <title>表单验证</title>
   <script src="../jquery-3.3.1.js"></script>
   <link rel="stylesheet" type="text/css" href="form.css"/>
   <link rel="stylesheet" type="text/javascript" href="form.js"/>

</head>

<body>
   
         <form method="post" action="">
            <div class="int">
               <label for="username">用户名：</label>
               <input type="text" id="username" class="required"/>
            </div>
            <div class="int">
               <label for="email">邮箱：</label>
               <input type="text" id="email" class="required"/>

            </div>
            <div class="int">
               <label for="personinfo">个人资料：</label>
               <input type="text" id="personinfo"/>
            </div>
            <div class="sub">
               <input type="submit" value="提交" id="send"/><input type="submit" value="重置" id="res"/>
            </div>
         </form>

   
</body>
</html>

jQ源码：
<script type="text/javascript">
//必填星号提示
$("form:input.required").each(function(){
   var $required=$("<strong class='high'>*</strong>");//创建元素
   $(this).parent().append($required);//追加到文档中

});

$("form:input").blur(function(){//为表单元素添加失去焦点事件
   var $parent=this.parent();
   $parent.find(".formtips").remove();//删除以前的提醒元素
   //验证用户名
   if($(this).is("#username")){
         if(this.value==""||this.value.length<6){
            var errorMsg="请输入至少6位的用户名";
            $parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
         }else{
            var okMsg="输入正确";
            $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
         }
   }
   //验证邮箱
   if($(this).is("#email")){
         if(this.value==""||(this.value!=""&&!/.+@.+\.{2,4}$/.test(this.value))){
            var errorMsg="请输入正确的邮箱地址";
            $parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
         }else{
            var okMsg="输入正确";
            $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
         }
   }
}).keyup(function(){
   $(this).triggerHandler("blur");
}).focus(function(){
   $(this).triggerHandler("blur");
});
//判断是否可提交表单
$("#send").click(function(){
   $("form.required:input").trigger("blur");
   var numErr=$("form.onError").length;
         if(numErr){
            return false;
         }
         alert("注册成功");
});

</script>

css：
.int{
background:;
border:none;
width:300px;
height:100px;
}
label{
cursor:pointer;
display:inline-block;
text-align:right;
float:left;
vertical-align:top;
width:10em;
margin-right:1em;

}

PythonWorld 发表于 2018-8-22 10:10:24

krpa 发表于 2018-8-21 20:05
HTML源码：

我发现楼主写的js都没执行，楼主看看是否引入的js库是否支持

krpa 发表于 2018-8-22 10:18:49

PythonWorld 发表于 2018-8-22 10:10
我发现楼主写的js都没执行，楼主看看是否引入的js库是否支持

好的，谢谢，我看看哈

页: [1]

鱼C论坛's Archiver

请问为什么无法添加星号提示呢？