先给大家分享数据校验显示效果
Web项目中客户端与服务端的交互离不开Form表单，Form表单中最常用的元素莫过于input标签，input标签首先要用的肯定是text文本框啦！
input文本框允许用户任意输入，难免会会有用户输入一些不符合规定的数据，此时，在提交之前对数据校验是很有必要的，如果等到提交到服务端再校验就会大大降低用户体验啦。
前端校验有很多现成的组件，比较好用的有 EasyUI 的 validateBox 插件，提示界面做的相当友好，只是validateBox 默认提供的校验规则比较有限，有时我们需要添加自己的校验规则。
= 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：
功能扩展
*
* Copyright (c) 2009-2015 RCM
*
* 新增 validate
Box 校验规则
*
*/
$.extend($.fn.validate
Box.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文件之后：
502_30@
