JavaWeb-表单及时验证(Jquery)

最新推荐文章于 2023-03-19 12:02:52 发布

原创最新推荐文章于 2023-03-19 12:02:52 发布 · 1.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #表单 #界面 #及时验证 #web前端

JavaWeb 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在JavaWeb应用中利用Jquery进行表单的实时验证。提供了界面截图和相关代码，旨在帮助开发者实现更友好的用户交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好吧，作为一个学生党，时间也并不是很宽裕的，紧接着上篇，将Jquery版的表单验证给赶了出来，大家需要的可以看看，有什么问题，也可以跟我交流，共同进步…

界面截图：
这里写图片描述

代码：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>个人信息注册</title>

    <script src="jquery/jquery.js"  type="text/javascript"></script>
         <!-- 样式 -->
    <link rel="stylesheet" href="css/1.css" />

    <script type="text/javascript">

    $(document).ready(function(){
        //使用类选择器，选择class="left"的对象，设置该对象中的字体为12px
        $(".left").css({"box-shadow":"inset" });
        //使用元素选择器，选择<input>对象，设置这些对象的css样式的边框
        $("input").css("border","solid 1px gray");
        //使用ID选择器，选择id="message"的对象，设置该对象的CSS样式的边框
        $("#message").css("border","dotted 1px gray");
        //选择所有的对象
        $("*").css("font-size","15px");
        //使用("span,legend")选择<span>和<legend>两个元素
        $("span").css("color","black");
        //属性选择器，选择name属性值为hobby的复选框，并设置为checked状态
        /* $("input[name='hobby']").attr("checked",true); */

         var ok1=false;
         var ok2=false;
         var ok3=false;
         var ok4=false;
         var ok5=false;
         var ok6=false;
         var ok7=false;
         // 验证用户名
         $('input[name="username"]').blur(function(){
             if($(this).val().length >= 3 && $(this).val().length <=18 && $(this).val()!=''){
                 $(this).next().text('OK!').removeClass('state1').addClass('state4');
                 ok1=true;
             }else{
                 $(this).focus();
                 $(this).next().text('* 用户名由3-18位字符组成  〤 ').removeClass('state1').addClass('state3');
             }
         });

         //验证密码
         $('input[name="password"]').blur(function(){
             if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=''){
                 $(this).next().text('OK!').removeClass('state1').addClass('state4');
                 ok2=true;
             }else{
                 $(this).focus();
                 $(this).next().text('* 密码由6-18位字符组成  〤').removeClass('state1').addClass('state3');
             }
         });

         //验证确认密码
         $('input[name="requiredpass"]').blur(function(){            
             if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!='' && $(this).val() == $('input[name="password"]').val()){
                 $(this).next().text('OK!').removeClass('state1').addClass('state4');
                 ok3=true;
             }else{
                 $(this).focus();
                 $(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state3');
             }      
         });


         //验证邮箱
         $('input[name="email"]').blur(function(){         
             if($(this).val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){
                 $(this).focus();
                 $(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state3');
             }else{                  
                 $(this).next().text('OK!').removeClass('state1').addClass('state4');
                 ok4=true;
             }             
         });


         //提交按钮,所有验证通过方可提交
         $('#submit').click(function(){
             //验证用户类型1
             var items = $("select :selected").val();
             if(items == "1"){
                 $(this).focus();
                 alert('请选择用户类型！');//弹出提示        
             }else{
                    ok5=true;// 返回真值表单提交    
             }

             //验证性别1
             if(!$("input[name='gender']").is(":checked")){//如果name为sex的input没有被选中 
                 $(this).focus();
                 alert('请选择性别！');//弹出提示        
             }else{
                    ok6=true;// 返回真值表单提交    
             }

             //验证爱好1
             if(!$("input[name='hobby']").is(":checked")){
                 $(this).focus();
                 alert('请至少选择一项爱好！');
             }else{
                    ok7=true;
             }

             if(ok1 && ok2 && ok3 && ok4 && ok5 && ok6 && ok7){
                 $('myform').submit();
             }else{
                 return false;
             }
         });
/*          

                  //验证用户类型2
               $("#usertype").blur(function(){
                 var items = $("select :selected").val();
                     if(items != "1"){
                        $("#tips_userlx").next().text('OK!'); 
                     }
               });  

               $("input:gender").blur(function(){
                //验证性别2
                   if($("input[name='gender']").is(":checked")){//如果name为sex的input被选中 
                    $("#tips_gender").val('OK!');
                   }
               }); 

               $("input[name='hobby']").blur(function(){
                //验证爱好2
                     if($("input[name='hobby']").is(":checked")){
                         $("#tips_hobby").val('OK!');
                     } 
               }); */       

    });

    </script> 
  </head>
  <body >
   <form action="#" method="post" id="myform" >
  <div>
    <fieldset style="background-image: url('img/4.jpg');">
       <legend >个人基本信息</legend>
       <div >
          <label for="usemane" class="left">名称：</label>
          <input type="text" name="username" id="username"/>
          <span id="tips_user">* 用户名由3-18位字符组成</span>
       </div>

       <div>
          <label for="password" class="left">密码：</label>
          <input type="password" name="password" id="password"/>
          <span id="tips_pass">* 密码由6-18位字符组成</span>
       </div>

       <div>
          <label for="requiredpass" class="left">确认密码：</label>
          <input type="password" name="requiredpass" id="requiredpass"/>
          <span id="tips_requiredpass">* 请再次输入你的密码</span>
       </div>

       <div>
          <label for="usemane" class="left">用户类型：</label>
          <select name="usetype" id="usertype">
            <option value="1">请选择</option>
            <option value="2">管理员</option>
            <option value="3">普通用户</option>          
          </select>
          <span id="tips_userlx">* 请选择用户类型</span>
       </div>

       <div>
          <label for="gender" class="left">性别：</label>
          <input type="radio" name="gender" id="gender" value="男"/>男
          <input type="radio" name="gender" id="gender" value="女"/>女
          <span id="tips_gender">* 请选择你的性别</span>
       </div>

       <div>
          <label for="hobby" class="left">爱好：</label>
          <input type="checkbox" name="hobby" id="hobby" value="reading"/>阅读
          <input type="checkbox" name="hobby" id="hobby" value="music"/>音乐
          <input type="checkbox" name="hobby" id="hobby" value="sports"/>运动
          <input type="checkbox" name="hobby" id="hobby" value="travell"/>旅行
          <span id="tips_hobby">* 请选择你的兴趣爱好</span>
       </div>

       <div>
          <label for="email" class="left">电子邮件：</label>
          <input type="text" name="email" id="email"/>
          <span id="tips_email">* 请填写常用的EMAIL，将用于密码找回</span>
       </div>

       <div>
          <label for="message" class="left">自我介绍：</label>
          <textarea name="message" id="message"></textarea>
          <span id="tips_message">* 限100字内</span>
       </div>

       <div>
          <button type="submit" class="submit" id="submit">提交</button>
          <button type="reset" >重置</button>
       </div>

   </fieldset>
   </div>
   </form>  
  </body>
</html>