zoukankan      html  css  js  c++  java
  • jquery表单验证

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <script src="jquery-1.4.2.js"></script>
    <script type="text/javascript">
    $(function(){

    $("form :input.required").each(function(){
    var $required="<strong class='high'>*</strong>";
    $(this).parent().append($required);

    });

    $("form :input").blur(function(){
    var $parent=$(this).parent();
    $parent.find(".formtips").remove();


    if($(this).is("#username"))
    {

    if(this.value=="" || this.value.length < 6)
    {
    var errorMsg="请输入至少6位的用户名";
    $parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
    }
    else
    {
    var okMsg=" 输入正确";
    $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
    }

    }


    if($(this).is("#email"))
    {

    if(this.value==""|| this.value!=""&& !/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/.test(this.value))
    {
    var errorMsg="请输入正确的邮箱地址";
    $parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
    }
    else
    {
    var okMsg=" 输入正确";
    $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
    }

    }


    $("#send").click(function(){
    $("form :input.required").trigger("blur");
    var numError=$("form .onError").length;
    if(numError)
    {
    return false;
    }
    alert("注册成功");
    });


    }).keyup(function(){
    $(this).triggerHandler("blur");
    }).focus(function(){
    $(this).triggerHandler("blur");
    });


    });
    </script>
    <style>
    .high{color:red;}

    </style>

    </head>

    <body>
    <form action="" method="post">
    <div class="int">
    <label for="username">用户名:</label>
    <input type="text" id="username" class="required">
    </div>
    <div class="int">
    <label for="email">邮 箱 :</label>
    <input type="text" id="email" class="required">
    </div>
    <div class="int">
    <label for="personinfo">个人资料:</label>
    <input type="text" id="personinfo">
    </div>
    <div class="sub">
    <input type="submit" value="提交" id="send">
    <input type="reset" value="重置" id="res">
    </div>
    </form>
    </body>
    </html>

  • 相关阅读:
    solr jvm参数内存自动计算
    记一次使用Chrome修改useragent
    如何查看本机中已安装的.Net Framework版本
    经典实例 PetShop 4.0 For .NET 2.0 下载
    Web.Config配置节加密工具
    some command for Nokia IP 740
    JNCIP进阶OSPF MultiArea Configuration
    寒武纪
    Symantec AntiVirus Corporate Edition 10.0 Error: "Can't communicate with the Server Group..."
    心房客
  • 原文地址:https://www.cnblogs.com/ll-taj/p/5810997.html
Copyright © 2011-2022 走看看