Web前端数据校验组件

Web项目中客户端与服务端的交互离不开Form表单,Form表单中最常用的元素莫过于input标签,input标签首先要用的肯定是text文本框啦!

input文本框允许用户任意输入,难免会会有用户输入一些不符合规定的数据,此时,在提交之前对数据校验是很有必要的,如果等到提交到服务端再校验就会大大降低用户体验啦。

前端校验有很多现成的组件,比较好用的有 EasyUI 的 validatebox 插件,提示界面做的相当友好,只是validatebox 默认提供的校验规则比较有限,有时我们需要添加自己的校验规则。

rules: {
			email:{
				validator: function(value){
					return ...?$/i.test(value);
				},
				message: 'Please enter a valid email address.'
			},
			url: {
				validator: function(value){
					return ...?$/i.test(value);
				},
				message: 'Please enter a valid URL.'
			},
			length: {
				validator: function(value, param){
					var len = $.trim(value).length;
					return len >= param[0] && len <= param[1]
				},
				message: 'Please enter a value between {0} and {1}.'
			},
			remote: {
				validator: function(value, param){
					var data = {};
					data[param[1]] = value;
					var response = $.ajax({
						url:param[0],
						dataType:'json',
						data:data,
						async:false,
						cache:false,
						type:'post'
					}).responseText;
					return response == 'true';
				},
				message: 'Please fix this field.'
			}
		},

自定义校验规则

添加新的校验规则时最好不要在EasyUI的源文件中进行,第一是避免因误操作而导致污染了EasyUi,更重要的是考虑到以后容易进行组件升级。所以最合理的办法是单独写自己的扩展文件。

比如:我在原有规则的基础上新增了以下三项校验,单独文件 easyui-extend-rcm.js:

(function($) {
	/**
	 * jQuery EasyUI 1.4 --- 功能扩展
	 * 
	 * Copyright (c) 2009-2015 RCM
	 *
	 * 新增 validatebox 校验规则
	 *
	 */
	$.extend($.fn.validatebox.defaults.rules, {
		idcard: {
			validator: function(value, param) {
				return idCardNoUtil.checkIdCardNo(value);
			},
			message: '请输入正确的身份证号码'
		},
		checkNum: {
			validator: function(value, param) {
				return /^([0-9]+)$/.test(value);
			},
			message: '请输入整数'
		},
		checkFloat: {
			validator: function(value, param) {
				return /^[+|-]?([0-9]+\.[0-9]+)|[0-9]+$/.test(value);
			},
			message: '请输入合法数字'
		}
	});
})(jQuery);

自定义规则使用方式

在中除了引入EasyUI的文件之外,还要引入自己的扩展文件,顺序在EasyUI文件之后:

<script src="#WEBROOT()/static/jseasyui/jquery.easyui.min.js" type="text/javascript" ></script>
<script src="#WEBROOT()/static/js/comm/easyui-extend-rcm.js" type="text/javascript"></script>

然后在Html中如下引用即可,一定要加Class 和 data-options两个属性:




数据校验显示效果

效果如下图所以: