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

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    </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="sub">
    <input type="submit" value="提交" id="send"/>
    <input type="reset" value="重置" id="res"/>
    </div>
    </form>
    </body>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
    $("form :input.required").each(function(){
    // 先清除已经加上的
    var $required=$("<strong style='color:red' 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 erroMsg='请输入至少6位的用户名.';
    $parent.append('<span class="formtips onError" >'+erroMsg+'</span>')
    }else{
    var okMsg='输入正确.';
    $parent.append('<span class="formtips onSuccess" >'+okMsg+'</span>')
    }
    }
    if($(this).is('#email')){
    if(this.value==""||(this.value!=""&&!/.+@.+.[a-zA-Z]{2,4}$/.test(this.value))){
    var eerroMsg='请输入正确的E-Mail地址.';
    $parent.append('<span class="formtips onError" >'+eerroMsg+'</span>')
    }else{
    var eokMsg='输入正确.';
    $parent.append('<span class="formtips onSuccess" >'+eokMsg+'</span>')
    }
    }
    }).keyup(function(){
    $(this).triggerHandler("blur");
    }).focus(function(){
    $(this).triggerHandler("blur");
    });
    // 触发事件,全部再检验一次
    $('#send').click(function(){
    $("form .required:input").trigger('blur');
    var numError=$('form .onError').length;
    if(numError){
    return false;
    }
    alert("注册成功,密码已经发到你的邮箱,请查收。");
    })
    // trigger() 方法触发被选元素上指定的事件以及事件的默认行为(比如表单提交)。
    // 该方法与 triggerHandler() 方法类似,不同的是 triggerHandler() 不触发事件的默认行为。
    // 与 triggerHandler() 方法相比的不同之处:
    // 它不会引起事件(比如表单提交)的默认行为
    // .trigger() 会操作 jQuery 对象匹配的所有元素,而 .triggerHandler() 只影响第一个匹配元素。
    // 由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡;如果目标元素不直接处理它们,则不会发生任何事情。
    </script>
    </html>
  • 相关阅读:
    vs.net2003里添加邮件发件人身份验证
    Linux下用PYTHON查找同名进程
    修改机器名后要修改IIS匿名访问用户
    [C#]使用MYSQL数据库
    JIRA OutOfMemoryErrors
    获取linux下当机堆栈
    python调用pipe
    [探讨]一次性工具软件
    GGSN
    三层交换机的作用
  • 原文地址:https://www.cnblogs.com/dianzan/p/7368482.html
Copyright © 2011-2022 走看看