您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
Ready 发布于2016年05月27日 00:05

原创 jQuery Validator format 格式化校验器

2994 次浏览 读完需要≈ 12 分钟

内容目录

jQuery Validator的format格式化校验器用于将指定的输入进行对应的格式化。

如果指定输入不符合相应的格式化要求,则校验不通过。

语法

jQuery Validator 1.0 新增

// 在校验规则对象中指定该属性
format: "formatter[/expression]"

// 例如:
format: "number/money"
format: "date/yyyy年MM月dd日"

参数

参数 描述
formatter String类型指示格式化器的名称(即对应格式化函数的名称)。
expression 可选/String类型对应格式化器所需的表达式字符串。

format格式化校验器可以校验指定的输入是否符合指定的格式。例如:输入是否符合指定的数字格式,输入是否符合指定的日期格式。

此外,format校验器具有较高的优先级,会比除required以外的其他校验器先执行:required > format > 其他校验器。如果输入符合格式要求,format校验器会保留格式化后的值,并将其作为输入值交给其他校验器进行校验。例如:range校验器将使用格式化后的数字进行数值范围校验,compare校验器将使用格式化后的数字或日期进行表达式比较校验。

format校验器依赖于底层的格式化器(formatter),你可以自行扩展格式化器。目前,系统预定义了以下格式化器。

number 数字格式化器

number格式化器主要用于将指定的输入格式化为对应的数字类型(Number)。其expression语法如下:

// "[]"表示可选
[sign][numberFormat]

sign表示正负符号位,可以为如下字符串:

  • "+":表示只允许是正数(包括0)。
  • "-":表示只允许是负数("-0"的写法也是允许的)。
  • "?":正负均可。
  • "":也就是sign部分可以省略,为默认值"+"

numberFormat支持如下字符串表示:

  • "{m}.{n}":mn用于分别指定整数部分和小数部分的位数。例如:"{5}.{2}"表示整数部分必须为5位数字,小数部分必须为2位数字。
    它们也可以是一个位数范围,上下边界用","隔开。例如:"{2,4}.{1,2}"表示整数部分是2~4位数字,小数部分是1~2位数字。"{1,}.{1,2}"表示整数部分是1位以上的数字,小数部分是1~2数字。
    小数部分也可以省略。例如:"{1,5}"表示1~5位整数。
  • "int""integer":表示必须是任意整数。
  • "float""double":表示任意整数或小数均可。
  • "money":表示必须是任意整数或保留两位小数以内的数字。

date 日期格式化器

date格式化器主要用于将指定的输入格式化为对应的日期类型(Date)。其expression支持以占位符"yyyy""MM""dd""HH""mm""ss"分别表示日期的年、月、日、时、分、秒部分的任意字符串。例如:"yyyy-MM-dd""yyyy-MM-dd HH:mm:ss""yyyy年MM月dd日""dd/MM/yyyy"

此外,expression还支持以下特殊字符串表示:

  • "date":等价于"yyyy-MM-dd"
  • "datetime": 等价于"yyyy-MM-dd HH:mm:ss"
  • "time":等价于"HH:mm:ss"
  • "":也就是expression可以省略,为默认值"date"

date格式化器底层采用自定义算法+缓存来确保解析的优异性能。

注意:目前,"MM""dd""HH""mm""ss"必须输入两位字符。例如:"yyyy-MM-dd"必须写作"2016-05-01",而不能写作"2016-5-1"(不能省略前置的"0")。后续考虑进一步支持无需前置"0"的方式,但目前尚未实现。

idcard 格式化器

idcard格式化器主要用于校验指定输入是否是合法的中国大陆居民身份证号码。它会将指定的输入格式化为对应的日期类型(身份证号码所对应的出生日期),因此它也算是一个特殊的日期格式化器。

idcard格式化器的expression语法如下:

// "[]"表示可选
[length][:ageRange]

length支持如下字符串:

  • "18":表示只允许输入18位的身份证号码(第二代及其后的居民身份证)。
  • "15":表示只允许输入15位的身份证号码(第一代居民身份证)。
  • "?":15位、18位的身份证号码均可。
  • "":也就是length部分可以省略,为默认值"?"

ageRange用于指定身份证的年龄范围,其用法与range校验器的表达式用法完全相同。
例如:"[18,]"表示身份证年龄必须大于或等于18。

ageRange参数也可以省略,表示不校验年龄范围。

idcard格式化器的expression也可以省略,默认为"?",表示15或18位身份证均可,且不校验年龄范围。

如果输入的身份证号码为18位(第二代以上居民身份证),idcard格式化器还会根据居民身份证的校验位算法对第18位的校验位字符进行校验。

示例&说明

以如下HTML表单为例:

<form action="https://codeplayer.vip/">
	<div>
		<label>商品价格</label>:
		<input id="price" name="price" type="text" >
	</div>
	<div>
		<label>商品数量</label>:
		<input id="amount" name="amount" type="text" >
	</div>
	<div>
		<label>开始时间</label>:
		<input id="beginTime" name="beginTime" type="text" >
	</div>
	<div>
		<label>身份证号码</label>:
		<input id="idcard" name="idcard" type="text" >
	</div>
	<input type="submit" value="提交" />
</form>

我们可以使用format校验器来实现如下功能:运行代码

v.define({
	"price": {
		format: "number/money", // 必须是两位小数以内的数字
		range: "(0,]" // 商品价格大于0
	},
	"amount": {
		format: "number", // 默认为"int",即必须为整数
		range: "(0,)" // 商品数量必须大于0
	},
	"beginTime": {
		format:"date", // 默认expression为"yyyy-MM-dd"
		compare: "this < now",
		message: {
			compare: "{label}不能大于当前时间"
		}
	},
	"idcard": {
		// 只允许二代以上身份证,且必须年满18周岁
		format:"idcard/18:[18,]"
	}	
});

// 在表单提交时执行以上规则校验
$("form").v("submit", {
	"#price": "price",
	"#amount": "amount",
	"#beginTime": "beginTime",
	"#idcard": "idcard"
});
  • CodePlayer技术交流群1
  • CodePlayer技术交流群2

0 条评论

撰写评论

打开导航菜单