表单验证

最新推荐文章于 2017-10-25 08:26:08 发布

阳光鬼怪

最新推荐文章于 2017-10-25 08:26:08 发布

阅读量138

点赞数

分类专栏： 4月Android hybrid跨平台开发

本文链接：https://blog.csdn.net/qq_40087072/article/details/78245875

版权

4月Android hybrid跨平台开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.0.js"></script>
</head>
<body>

  <h3 style="color: red;margin-left: 300px">以下均为必填项</h3>

  <div  style="margin-left: 300px">
      <form method="post" action="">
       <div>
      请填写您的Emile地址:<input type="text" name="email" id="email"/>
      <span id="span">请填写有效的Email地址</span>
       </div>

          <div>
              设置您在当当网的昵称:<input type="text" name="names" id="names"/>
              <span id="span2">您的昵称可以由英文字母、中文、数字组成</span>
          </div>

          <div>
              设置密码:<input type="password" name="pwd" id="pwd"/>
              <span id="span3">您的密码可以由英文字母、中文、数字组成</span>
          </div>

          <div>
              再次输入您的密码:<input type="password" name="pwd2" id="pwd2"/>
              <span id="span4">两次输入不一致</span>
          </div>
          <br/>

          <div style="margin-left:200px">

          <input type="submit" value="注册"/>
          </div>


      </form>

  </div>

</body>

<script type="text/javascript">
    $(function () {
        var flag=false;
        var flag2=false;
        var flag3=false;
        var flag4=false;
        $("#email").blur(function () {
            var email=$("#email").val();
            var ma=email.match("@");
            if(ma==null){
                $("#span").text("输入的邮箱不合法");
                $("#span").css({"color":"red"});
                flag=false;
            }else{
                $("#span").text("√");
                $("#span").css({"color":"green"});
                flag=true;
            }
        });
        $("#names").blur(function () {
            var name=$("#names").val();
            if(name==""){
                $("#span2").text("请输入昵称");
                $("#span2").css({"color":"red"});
            }else{
                $("#span2").text("√");
                $("#span2").css({"color":"green"});
                flag2=true;
            }

        });
        $("#pwd").blur(function () {
            var pwd=$("#pwd").val();
            if(pwd==""){
                $("#span3").text("请输入密码");
                $("#span3").css({"color":"red"});
                flag3=false;
            }else if(pwd.length<3){
                $("#span3").text("密码长度不可小于3位!");
                $("#span3").css({"color":"red"});
            }else{
                $("#span3").text("√");
                $("#span3").css({"color":"green"});
                flag3=true;
            }
        });
        $("#pwd2").blur(function () {
            var pwd=$("#pwd").val();
            var pwd2=$("#pwd2").val();
            if(pwd2!=pwd){
                $("#span4").text("两次密码不一致!");
                $("#span4").css({"color":"red"});
                flag4=false;
            }else if(pwd2==""){
                $("#span4").text("不可为空!");
                $("#span4").css({"color":"red"});
            }else{
                $("#span4").text("√");
                $("#span4").css({"color":"green"});
                flag4=true;
            }

        });
    })
    
    
    
</script>
</html>

阳光鬼怪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单验证

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> script src="jquery-1.11.0.js">script>head>body> h3 style="color: red;margin-left: 300px">以下均为必填项h3> div style="
复制链接

扫一扫

专栏目录