JQ获取表单的值

版权声明:转载原创文章请以超链接形式请注明原文章出处,尊重作者,尊重原创!


恰饭广告




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            list-style-type: none;
        }
        input{
            margin-bottom: 10px;
            border-radius: 5px;
            width: 300px;
            height: 25px;
        }
        [type=submit]{
            background: #0E97E4;
            color: white;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <li><input type="text" id="one" placeholder="请输入字母或数字组成的登录代码"></li>
        <li><input type="text" id="two" placeholder="请输入大小写字母、数字和特殊符号组成的密码"></li>
        <li><input type="submit" value="确认登录" id="danji"></li>
    </div>
    <div id="result"></div>
    <script src="jquery-3.2.1.js"></script>
    <script>
        $(document).ready(function(){
            $("#one").mouseover(function(){
                $(this).css("border-color","blue");
                $(this).attr("placeholder","");
            });
            $("#one").mouseout(function(){
                $(this).css("border-color","pink");
                $(this).attr("placeholder","请输入字母或数字组成的登录代码");
            });
             $("#two").mouseover(function(){
                $(this).css("border-color","blue");
                $(this).attr("placeholder","");
            });
            $("#two").mouseout(function(){
                $(this).css("border-color","pink");
                $(this).attr("placeholder","请输入大小写字母、数字和特殊符号组成的密码");
            });
            //验证
            $("#danji").click(function(){
             var code=/^[A-Za-z0-9]+$/;
             var passwd=/^\w+$/;
             var a=$("#one").val();
             var b=$("#two").val();
             if(code.test(a)&&passwd.test(b)){
                 alert("你输入登陆代码为:"+a+"\n你输入登陆密码为:"+b);
             }
             else{
                 alert("输入登陆代码及密码");
             }
            });
        });
    </script>
</body>
</html> 

原文链接:https://www.idaobin.com/archives/270.html

让我恰个饭吧.ヘ( ̄ω ̄ヘ)

支付宝 ——————- 微信
图片加载中图片加载中



恰饭广告

发表评论

电子邮件地址不会被公开。 必填项已用*标注

7 × = 42