jquery.validate-jquery表单验证插件

发布于，归属于jquery插件。 沙发还空着，抢！ 共有699人围观    

validate

这插件很好很强大，强烈推荐！
点此下载

简要说明下其使用方法(html结构不贴出来，详见示例)

  1. var validator = $("#signupform").validate({
  2.         rules: {
  3.             firstname: "required",
  4.             lastname: "required",
  5.             username: {
  6.                 required: true,
  7.                 minlength: 2,
  8.                 remote: "users.php"
  9.             },
  10.             password: {
  11.                 required: true,
  12.                 minlength: 5
  13.             },
  14.             password_confirm: {
  15.                 required: true,
  16.                 minlength: 5,
  17.                 equalTo: "#password"
  18.             },
  19.             email: {
  20.                 required: true,
  21.                 email: true,
  22.                 remote: "emails.php"
  23.             },
  24.             dateformat: "required",
  25.             terms: "required"
  26.         },
  27.         messages: {
  28.             firstname: "Enter your firstname",
  29.             lastname: "Enter your lastname",
  30.             username: {
  31.                 required: "Enter a username",
  32.                 minlength: jQuery.format("Enter at least {0} characters"),
  33.                 remote: jQuery.format("{0} is already in use")
  34.             },
  35.             password: {
  36.                 required: "Provide a password",
  37.                 rangelength: jQuery.format("Enter at least {0} characters")
  38.             },
  39.             password_confirm: {
  40.                 required: "Repeat your password",
  41.                 minlength: jQuery.format("Enter at least {0} characters"),
  42.                 equalTo: "Enter the same password as above"
  43.             },
  44.             email: {
  45.                 required: "Please enter a valid email address",
  46.                 minlength: "Please enter a valid email address",
  47.                 remote: jQuery.format("{0} is already in use")
  48.             },
  49.             dateformat: "Choose your preferred dateformat",
  50.             terms: " "
  51.         },
  52.         // the errorPlacement has to take the table layout into account
  53.         errorPlacement: function(error, element) {
  54.             if ( element.is(":radio") )
  55.                 error.appendTo( element.parent().next().next() );
  56.             else if ( element.is(":checkbox") )
  57.                 error.appendTo ( element.next() );
  58.             else
  59.                 error.appendTo( element.parent().next() );
  60.         },
  61.         // specifying a submitHandler prevents the default submit, good for the demo
  62.         submitHandler: function() {
  63.             alert("submitted!");
  64.         },
  65.         // set this class to error-labels to indicate valid fields
  66.         success: function(label) {
  67.             // set   as text for IE
  68.             label.html(" ").addClass("checked");
  69.         }
  70.     });
  1. rules : 所应用的规则名，firstname: “required”，firstname是所对应的表单内的id，后面是所起作用的规则。值得注意的是有些规则会包含{0}，这相当于模板程序会自动替换成所起作用的对象名。remote这个规则属性就是ajax验证了。
  2. messages表单的消息提示信息了。
  3. errorPlacement:错误信息所添加的位置。有些表单元素会需要一些差异性的提示位置，就要用到这属性
  4. submitHandler ： 这是点击提交后触发的回调函数。
  5. success : 成功时候的回调函数
（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

同类