网站首页技术博客

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

第一步引入JS

这两个是Validate核心文件，在这之前你要确定你引入了jquery库

这个js是一个官方示例作为参考，不必引入

第二部自定义验证规则

$("#signupForm").validate({
	    rules: {
	      userpassword: {
	        required: true,
	        minlength: 6,
	        remote:"/my/ajax_checkpwd"
	      },
	      password: {
	        required: true,
	        minlength: 6
	      },
	      confirm_password: {
	        required: true,
	        minlength: 6,
	        equalTo: "input[name='password']"
	      }
	    },
	    messages: {
	      userpassword: {
	        required: "请输入原密码",
	        minlength: "原密码长度不能小于6个字母",
	        remote: "原密码错误"	        
	      },
	      password: {
	        required: "请输入新密码",
	        minlength: "新密码长度不能小于 6 个字母"
	      },
	      confirm_password: {
	        required: "请再次输入新密码",
	        minlength: "密码长度不能小于 6 个字母",
	        equalTo: "两次密码输入不一致"
	      }
	    }
  });

#signupForm为form表单ID，userpassword,password,confirm_password这些为待验证字段的name属性值，可自定义

required，minlength，equalTo，remote为验证规则

完整内置验证规则参数

异步验证

remote：URL

使用 ajax 方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用 data 选项。

remote: "check-email.php"

remote: {
    url: "check-email.php",     //后台处理程序
    type: "post",               //数据发送方式
    dataType: "json",           //接受数据格式   
    data: {                     //要传递的数据
        username: function() {
            return $("#username").val();
        }
    }}

远程地址只能输出 "true" 或 "false"，不能有其他输出。

详情参考：http://www.runoob.com/jquery/jquery-plugin-validate.html