简单的表单提交（jquery）

最新推荐文章于 2022-08-15 14:11:51 发布

空谷余音~

最新推荐文章于 2022-08-15 14:11:51 发布

阅读量445

点赞数

本文链接：https://blog.csdn.net/qq_42689450/article/details/82597898

版权

表单要求：

用jquery编写一个简单的表单提交界面，包括用户名，密码，验证码。
表单必须填写，否则要有相应的提示，密码框要有密码强度的跟踪显示，获取验证码时要显示相应的倒计时。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交</title>

    <style>
        #table1{border-top: chocolate 2px solid;
              border-bottom: chocolate 2px solid;
        }
        td{
            padding: 10px;
        }
        .a{background-color: red ;color: white}
        .b{background-color: aqua;color: white}
        .c{background-color: chartreuse;color: white}
    </style>
    <script src="libraries/jquery-3.2.1.min.js"></script>
</head>
<body>
<form action="abc">
<table id="table1" width="100%">
    <tboday>
        <tr>
            <td>用户名</td>
            <td ><input type="text" id="username"></td>
            <td><span id="usernameMsg"></span></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" id="password"></td>
            <td><span id="userpassMsg"></span></td>
        </tr>
        <tr>
            <td><input type="button" value="获取短信验证码" id="butt" > </td>
            <td><input type="text" id="code"></td>
            <td><span id="codeMsg"></span></td>
        </tr>
    </tboday>
</table>
<p align="left"><input type="submit"  value="注册" ></p>
<script>

    //密码填写检测
    $("#password").blur(function () {
        if($.trim(this.value).length==0){
            $("#userpassMsg").text("密码不能为空");
        }
    })
    //验证码填写检测
    $("#code").blur(function () {
        if($.trim(this.value).length==0){
          $("#codeMsg").text("验证码必须填写");  
        }
    })
    //短信发送倒计时
    $("#butt").click(function () {
        this.disabled=true;//当点击短信按钮后将禁用属性设为turn，不能再点击
        setTimeout(ablebutt,1000);//延迟1秒后执行ablebutt方法
    });
    var c=5;//设置一个倒计时时间
    function ablebutt(){
        if(c>0){
            $("#butt").val(c+"秒后重新获取");
            setTimeout(ablebutt,1000);//等待1秒钟然后再次调用本身
            c--;//每次调用一次自身倒计时减去1秒
        }
        else{
            $("#butt").prop("disabled",false);//重新启用
            $("#butt").val("获取短信验证码");//可以点击再次获取验证码
            c=5;//重置倒计时时间为5
        }

    }
    //检查安全强度
    $("#password").keyup(function () {
        var p=$.trim(this.value);//获取密码长度
        //判断密码是否为空
        if(p.length==0){
            $("userpassMsg").text("密码不能为空")
        }
        //如果不为空，再校验密码安全强度
        var count=0;//后面要根据count的值判断强度大小
          if(/[0-9]/.test(p)){
            count++;
          }         
          if(/[a-zA-Z]/.test(p)){
              count++;
          }
          if(/[^0-9a-zA-Z]/.test(p)){
              count++;
          }
          if(count==3&&p.length>6){
              $("#userpassMsg").text("高强度").removeClass("b").removeClass("c").addClass("a");
          }else if (count==2){
              $("#userpassMsg").text("中强度").removeClass("a").removeClass("c").addClass("b");
          } else { $("#userpassMsg").text("低强度").removeClass("b").removeClass("a").addClass("c");}
    });
    //检查用户名长度是否符合规定。用光标离开事件onblur
    $("#username").blur(function () {
        if($.trim(this.value).length<2){
            $("#usernameMsg").text("请输入大于2个字符的用户名");
        }
        else {
            //清空错误信息，否则下次输入正确信息时上一次的错误提示还在
            //  $("#usernameMsg").text("");表示空字符串，效果一样。
            $("#usernameMsg").empty();
        }
    });
</script>
</form>
</body>
</html>

上述代码仅仅是一个简单说明，对于业务上还有很多遗漏的需求，还望大家指正。

空谷余音~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简单的表单提交（jquery）

表单要求：用jquery编写一个简单的表单提交界面，包括用户名，密码，验证码。表单必须填写，否则要有相应的提示，密码框要有密码强度的跟踪显示，获取验证码时要显示相应的倒计时。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&am
复制链接

扫一扫