BlogJava-别昨非-随笔分类-jquery and jquery pluginhttp://www.blogjava.net/zuofei-bie/category/44470.htmljava and phpzh-cnWed, 31 Mar 2010 07:45:11 GMTWed, 31 Mar 2010 07:45:11 GMT60Jquery validate (引用)http://www.blogjava.net/zuofei-bie/archive/2010/03/31/317062.html别昨非别昨非Wed, 31 Mar 2010 07:27:00 GMThttp://www.blogjava.net/zuofei-bie/archive/2010/03/31/317062.htmlhttp://www.blogjava.net/zuofei-bie/comments/317062.htmlhttp://www.blogjava.net/zuofei-bie/archive/2010/03/31/317062.html#Feedback0http://www.blogjava.net/zuofei-bie/comments/commentRss/317062.htmlhttp://www.blogjava.net/zuofei-bie/services/trackbacks/317062.html
  • $(document).ready(function(){    
  •   
  • /* 设置默认属性 */    
  • $.validator.setDefaults({    
  •   submitHandler: function(form) { form.submit(); }    
  • });    
  • // 中文字两个字节    
  • jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {    
  •   var length = value.length;    
  •   for(var i = 0; i < value.length; i++){    
  •    if(value.charCodeAt(i) > 127){    
  •     length++;    
  •    }    
  •   }    
  •   return this.optional(element) || ( length >= param[0] && length <= param[1] );    
  • }, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");    
  •   
  • /* 追加自定义验证方法 */    
  • // 身份证号码验证    
  • jQuery.validator.addMethod("isIdCardNo", function(value, element) {    
  •   return this.optional(element) || isIdCardNo(value);    
  • }, "请正确输入您的身份证号码");    
  •   
  • // 字符验证    
  • jQuery.validator.addMethod("userName", function(value, element) {    
  •   return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);    
  • }, "用户名只能包括中文字、英文字母、数字和下划线");    
  •   
  • // 手机号码验证    
  • jQuery.validator.addMethod("isMobile", function(value, element) {    
  •   var length = value.length;    
  •   return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));    
  • }, "请正确填写您的手机号码");    
  •   
  • // 电话号码验证    
  • jQuery.validator.addMethod("isPhone", function(value, element) {    
  •   var tel = /^(\d{3,4}-?)?\d{7,9}$/g;    
  •   return this.optional(element) || (tel.test(value));    
  • }, "请正确填写您的电话号码");    
  •   
  • // 邮政编码验证    
  • jQuery.validator.addMethod("isZipCode", function(value, element) {    
  •   var tel = /^[0-9]{6}$/;    
  •   return this.optional(element) || (tel.test(value));    
  • }, "请正确填写您的邮政编码");    
  • $(regFrom).validate({    
  • /* 设置验证规则 */    
  •   rules: {    
  •    userName: {    
  •     required: true,    
  •     userName: true,    
  •     byteRangeLength: [3,15]    
  •    },    
  •    password: {    
  •     required: true,    
  •     minLength: 5    
  •    },    
  •    repassword: {    
  •     required: true,    
  •     minLength: 5,    
  •     equalTo: "#password"    
  •    },    
  •    question: {    
  •     required: true    
  •    },    
  •    answer: {    
  •     required: true    
  •    },    
  •    realName: {    
  •     required: true    
  •    },    
  •    cardNumber: {    
  •     isIdCardNo: true    
  •    },    
  •    mobilePhone: {    
  •     isMobile: true    
  •    },    
  •    phone: {    
  •     isPhone: true    
  •    },    
  •    email: {    
  •     required: true,    
  •     email: true    
  •    },    
  •    zipCode: {    
  •     isZipCode:true    
  •    }    
  •   },    
  • /* 设置错误信息 */    
  •   messages: {    
  •    userName: {    
  •     required: "请填写用户名",    
  •     byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"    
  •    },    
  •    password: {    
  •     required: "请填写密码",    
  •     minlength: jQuery.format("输入{0}.")    
  •    },    
  •    repassword: {    
  •     required: "请填写确认密码",    
  •     equalTo: "两次密码输入不相同"    
  •    },    
  •    question: {    
  •     required: "请填写您的密码提示问题"    
  •    },    
  •    answer: {    
  •     required: "请填写您的密码提示答案"    
  •    },    
  •    realName: {    
  •     required: "请填写您的真实姓名"    
  •    },    
  •    email: {    
  •     required: "请输入一个Email地址",    
  •     email: "请输入一个有效的Email地址"    
  •    }    
  •   },    
  • /* 错误信息的显示位置 */    
  •   errorPlacement: function(error, element) {    
  •    error.appendTo( element.parent() );    
  •   },    
  • /* 验证通过时的处理 */    
  •   success: function(label) {    
  •    // set   as text for IE    
  •    label.html(" ").addClass("checked");    
  •   },    
  • /* 获得焦点时不验证 */    
  •   focusInvalid: false,    
  •   onkeyup: false    
  • });    
  •   
  • // 输入框获得焦点时，样式设置    
  • $('input').focus(function(){    
  •   if($(this).is(":text") || $(this).is(":password"))    
  •    $(this).addClass('focus');    
  •   if ($(this).hasClass('have_tooltip')) {    
  •    $(this).parent().parent().removeClass('field_normal').addClass('field_focus');    
  •   }    
  • });    
  •   
  • // 输入框失去焦点时，样式设置    
  • $('input').blur(function() {    
  •   $(this).removeClass('focus');    
  •   if ($(this).hasClass('have_tooltip')) {    
  •    $(this).parent().parent().removeClass('field_focus').addClass('field_normal');    
  •   }    
  • });    
  • });   


    • 别昨非 2010-03-31 15:27 发表评论
    ]]>    jquery validate demohttp://www.blogjava.net/zuofei-bie/archive/2010/03/31/317063.html别昨非别昨非Wed, 31 Mar 2010 07:27:00 GMThttp://www.blogjava.net/zuofei-bie/archive/2010/03/31/317063.htmlhttp://www.blogjava.net/zuofei-bie/comments/317063.htmlhttp://www.blogjava.net/zuofei-bie/archive/2010/03/31/317063.html#Feedback0http://www.blogjava.net/zuofei-bie/comments/commentRss/317063.htmlhttp://www.blogjava.net/zuofei-bie/services/trackbacks/317063.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>jQuery validation plug-in - main demo</title>

    <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />

    <script src="../lib/jquery.js" type="text/javascript"></script>
    <script src="../jquery.validate.js" type="text/javascript"></script>

    <script type="text/javascript">
    $.validator.setDefaults({
     submitHandler: function() { alert("submitted!"); }
    });

    $().ready(function() {
     // validate the comment form when it is submitted
     $("#commentForm").validate();
     
     // validate signup form on keyup and submit
     $("#signupForm").validate({
      rules: {
       firstname: "required",
       lastname: "required",
       username: {
        required: true,
        minlength: 2
       },
       password: {
        required: true,
        minlength: 5
       },
       confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
       },
       email: {
        required: true,
        email: true
       },
       topic: {
        required: "#newsletter:checked",
        minlength: 2
       },
       agree: "required"
      },
      messages: {
       firstname: "Please enter your firstname",
       lastname: "Please enter your lastname",
       username: {
        required: "Please enter a username",
        minlength: "Your username must consist of at least 2 characters"
       },
       password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
       },
       confirm_password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long",
        equalTo: "Please enter the same password as above"
       },
       email: "Please enter a valid email address",
       agree: "Please accept our policy"
      }
     });
     
     // propose username by combining first- and lastname
     $("#username").focus(function() {
      var firstname = $("#firstname").val();
      var lastname = $("#lastname").val();
      if(firstname && lastname && !this.value) {
       this.value = firstname + "." + lastname;
      }
     });
     
     //code to hide topic selection, disable for demo
     var newsletter = $("#newsletter");
     // newsletter topics are optional, hide at first
     var inital = newsletter.is(":checked");
     var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
     var topicInputs = topics.find("input").attr("disabled", !inital);
     // show when newsletter is checked
     newsletter.click(function() {
      topics[this.checked ? "removeClass" : "addClass"]("gray");
      topicInputs.attr("disabled", !this.checked);
     });
    });
    </script>

    <style type="text/css">
    #commentForm { width: 500px; }
    #commentForm label { width: 250px; }
    #commentForm label.error, #commentForm input.submit { margin-left: 253px; }
    #signupForm { width: 670px; }
    #signupForm label.error {
     margin-left: 10px;
     width: auto;
     display: inline;
    }
    #newsletter_topics label.error {
     display: none;
     margin-left: 103px;
    }
    </style>

    </head>
    <body>

    <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
    <div id="main">

    <p>Default submitHandler is set to display an alert into of submitting the form</p>

    <form class="cmxform" id="commentForm" method="get" action="">
     <fieldset>
      <legend>Please provide your name, email address (won't be published) and a comment</legend>
      <p>
       <label for="cname">Name (required, at least 2 characters)</label>
       <input id="cname" name="name" class="required" minlength="2" />
      <p>
       <label for="cemail">E-Mail (required)</label>
       <input id="cemail" name="email" class="required email" />
      </p>
      <p>
       <label for="curl">URL (optional)</label>
       <input id="curl" name="url" class="url" value="" />
      </p>
      <p>
       <label for="ccomment">Your comment (required)</label>
       <textarea id="ccomment" name="comment" class="required"></textarea>
      </p>
      <p>
       <input class="submit" type="submit" value="Submit"/>
      </p>
     </fieldset>
    </form>

    <form class="cmxform" id="signupForm" method="get" action="">
     <fieldset>
      <legend>Validating a complete form</legend>
      <p>
       <label for="firstname">Firstname</label>
       <input id="firstname" name="firstname" />
      </p>
      <p>
       <label for="lastname">Lastname</label>
       <input id="lastname" name="lastname" />
      </p>
      <p>
       <label for="username">Username</label>
       <input id="username" name="username" />
      </p>
      <p>
       <label for="password">Password</label>
       <input id="password" name="password" type="password" />
      </p>
      <p>
       <label for="confirm_password">Confirm password</label>
       <input id="confirm_password" name="confirm_password" type="password" />
      </p>
      <p>
       <label for="email">Email</label>
       <input id="email" name="email" />
      </p>
      <p>
       <label for="agree">Please agree to our policy</label>
       <input type="checkbox" class="checkbox" id="agree" name="agree" />
      </p>
      <p>
       <label for="newsletter">I'd like to receive the newsletter</label>
       <input type="checkbox" class="checkbox" id="newsletter" name="newsletter" />
      </p>
      <fieldset id="newsletter_topics">
       <legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend>
       <label for="topic_marketflash">
        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" />
        Marketflash
       </label>
       <label for="topic_fuzz">
        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" />
        Latest fuzz
       </label>
       <label for="topic_digester">
        <input type="checkbox" id="topic_digester" value="digester" name="topic" />
        Mailing list digester
       </label>
       <label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
      </fieldset>
      <p>
       <input class="submit" type="submit" value="Submit"/>
      </p>
     </fieldset>
    </form>

    <h3>Syntetic examples</h3>
    <ul>
     <li><a href="errorcontainer-demo.html">Error message containers in action</a></li>
     <li><a href="custom-messages-metadata-demo.html">Custom Messages as Metadata</a></li>
     <li><a href="radio-checkbox-select-demo.html">Radio and checkbox buttons and selects</a></li>
     <li><a href="ajaxSubmit-intergration-demo.html">Integration with Form Plugin (AJAX submit)</a></li>
     <li><a href="custom-methods-demo.html">Custom methods and message display.</a></li>
     <li><a href="dynamic-totals.html">Dynamic forms</a></li>
     <li><a href="themerollered.html">Forms styled with jQuery UI Themeroller</a></li>
    </ul>
    <h3>Real-world examples</h3>
    <ul>
     <li><a href="milk/">Remember The Milk signup form</a></li>
     <li><a href="marketo/">Marketo signup form</a></li>
     <li><a href="multipart/">Buy and Sell a House multipart form</a></li>
     <li><a href="captcha/">Remote captcha validation</a></li>
    </ul>

    <h3>Testsuite</h3>
    <ul>
     <li><a href="../test/">Validation Testsuite</a></li>
    </ul> 

    </div>

    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    _uacct = "UA-2623402-1";
    urchinTracker();
    </script>
    </body>
    </html>



    别昨非 2010-03-31 15:27 发表评论
    ]]>