« 上一篇 下一篇 »

Validate 表单验证​

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

第一步引入JS

<script src="/ui/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/ui/js/plugins/validate/messages_zh.min.js"></script>

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

<script src="js/demo/form-validate-demo.min.js"></script>

这个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为验证规则


完整内置验证规则参数


名称返回类型描述
required()Boolean必填验证元素。
required(dependency-expression)Boolean必填元素依赖于表达式的结果。
required(dependency-callback)Boolean必填元素依赖于回调函数的结果。
remote(url)Boolean请求远程校验。url 通常是一个远程调用方法。
minlength(length)Boolean设置最小长度。
maxlength(length)Boolean设置最大长度。
rangelength(range)Boolean设置一个长度范围 [min,max]。
min(value)Boolean设置最小值。
max(value)Boolean设置最大值。
email()Boolean验证电子邮箱格式。
range(range)Boolean设置值的范围。
url()Boolean验证 URL 格式。
date()Boolean验证日期格式(类似 30/30/2008 的格式,不验证日期准确性只验证格式)。
dateISO()Boolean验证 ISO 类型的日期格式。
dateDE()Boolean验证德式的日期格式(29.04.1994 或 1.1.2006)。
number()Boolean验证十进制数字(包括小数的)。
digits()Boolean验证整数。
creditcard()Boolean验证信用卡号。
accept(extension)Boolean验证相同后缀名的字符串。
equalTo(other)Boolean验证两个输入框的内容是否相同。
phoneUS()Boolean验证美式的电话号码。

异步验证

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