自己写jquery表单验证

最新推荐文章于 2021-12-09 13:59:43 发布

yy211zhu

最新推荐文章于 2021-12-09 13:59:43 发布

阅读量675

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript Jquery 文章标签： jquery 表单

本文链接：https://blog.youkuaiyun.com/yy211zhu/article/details/52496668

JavaScript 同时被 2 个专栏收录

17 篇文章

订阅专栏

Jquery

13 篇文章

订阅专栏

本文介绍了一个简单的纯JS实现的表单验证案例，包括HTML结构和JS逻辑，通过自定义验证规则来确保用户输入的有效性。

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

jquery的表单验证插件数不胜数，有时想想其实有的项目不需要引入一些插件，要有自己动手的好习惯，下面是一个简单的表单验证。

一、html代码

                <form name="j-form" id="j-form" method="POST">
                    <h3>用户登录</h3>
                    <div class="input-item">
                        <i class="fa fa-user fa-fw"></i>
                        <input type="text" name="username" id="Uname" placeholder="请输入用户名" maxlength="20"><span id="fU" style="display: none;">请输入用户名！</span>
                    </div>
                    <div class="input-item">
                        <i class="fa fa-key fa-fw"></i>
                        <input type="password" name="userpwd" id="Upwd" placeholder="请输入密码" maxlength="16"><span id="fP" style="display: none;">请输入密码！</span>
                    </div>
                    <div class="radio-item clearfix">
                        <span class="radio-con fl">
                           <input class="magic-radio" type="radio" value="1" name="user-r" id="radion-u" checked><label for="radion-u">记住用户</label>
                        </span>
                        <span class="radio-con fr">
                          <input class="magic-radio" type="radio" value="2" name="user-r" id="radio-p"><label for="radio-p">记住密码</label>
                        </span>
                    </div>
                    <div class="login-btn">
                        <input type="submit" id="btn-login" value="登    录">
                    </div>
                </form>

二、js代码

<script>
    $(document).ready(function(){
           $("#btn-login").on("click",function(e){
               e=event || window.event;
               e.preventDefault();
               var userName=$("#Uname").val().trim();
               var userPwd=$("#Upwd").val().trim();
               var sta=(userName=="" && userPwd=="") && 1 || userName=="" && 2 || userPwd=="" && 3 || 4;
               switch (sta){
                   case 1:
                       $("#fU").css("display","block");
                       $("#fP").css("display","block");
                         /*alert("请输入用户名与密码");*/
                       break;
                   case 2:
                       $("#fU").css("display","block");
                       $("#fP").css("display","none");
                   /*   alert("请输入用户名");*/
                       break;
                   case 3:
                       $("#fP").css("display","block");
                       $("#fU").css("display","none");
                    /*   alert("请输入密码");*/
                       break;
                   case 4:
                       $("#fU").css("display","none");
                       $("#fP").css("display","none");
                       $.ajax({
                           type:"post",
                           url:"",
                           dataType:"json",
                           data:{
                               "username":userName,
                               "userpwd":userPwd
                           },
                           success:function(msg){
                               window.location.href="";
                           },
                           error:function(){
                               alert("登录失败！");
                           }

                       })
                       $("#j-form").submit();//提交表单
               }
           })
    })
</script>

三、效果图
这里写图片描述