zoukankan      html  css  js  c++  java
  • js_表单登陆 reg.test(str)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
    .ok{color: green;}
    .error{color: red;}

    </style>
    <script type="text/javascript">
    //验证账号的格式
    function checkCode() {
    var code=document.getElementById("code").value;
    //获取span
    var span=document.getElementById("code_msg");
    //判断账号格式
    var reg=/^w{5,10}$/;
    if(reg.test(code)){
    //格式对了变绿
    span.className="ok";
    return true;
    }else{
    //格式错了变红
    span.className="error";
    return false;
    }
    }
    function checkPwd() {
    var pwd=document.getElementById("pwd").value;
    var span=document.getElementById("pwd_msg");
    var reg=/^w{5,10}$/;
    if(reg.test(pwd)){
    span.className="ok";
    return true;
    }else{
    span.className="error";
    return false;
    }
    }
    </script>
    </head>
    <body>
    <form action="http://www.baidu.com" onsubmit="return checkCode()+checkPwd()==2">
    <p>
    账号:<input type="text" id="code" onblur="checkCode();"> <span id="code_msg">5-10位字母,数字,下划线</span>
    </p>
    <p>密码:<input type="password" id="pwd" onblur="checkPwd()"> <span id=pwd_msg>10-20位字母,数字,下划线</span>
    </p>
    <p>
    <input type="submit" value="登陆">
    </p>
    </form>
    </body>
    </html>

  • 相关阅读:
    软件工程敏捷开发06
    学习进度条
    软件工程敏捷开发05
    软件工程敏捷开发04
    敏捷开发用户场景分析
    软件工程敏捷开发03
    软件工程敏捷开发02
    软件工程敏捷开发01
    面向对象程序设计(一)
    Java介绍、环境的搭建及结构化程序
  • 原文地址:https://www.cnblogs.com/Bighua123/p/7631650.html
Copyright © 2011-2022 走看看