jQuery插件EasyUI校验规则 validatebox验证框

Web前端数据校验组件

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:

rush: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文件之后:

broOT

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

rush:java;">
添加中药'" buttons="#dlg-buttons">
 
display:none;">


rush:java;">

数据校验显示效果

效果如下图所以:

希望通过这篇文章的学习对jQuery EasyUI validateBox校验规则更加了解。

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: &lt;span id=&quot...
jQuery 添加水印 &lt;script src=&quot;../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...