jQuery插件EasyUI校验规则 validatebox验证框_jquery
程序员文章站
2022-03-10 10:00:43
...
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
自定义校验规则
添加新的校验规则时最好不要在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文件之后:
然后在Html中如下引用即可,一定要加Class 和 data-options两个属性:
html">
数据校验显示效果
效果如下图所以:
推荐阅读
-
Easyui 修改jquery validatebox为英文校验提示为中文提示
-
jQuery Validate 验证,校验规则写在控件中的具体实例
-
jQuery EasyUI之验证框validatebox实例详解
-
jQuery Validate插件自定义验证规则的方法
-
Jquery插件easyUi表单验证提交(示例代码)
-
jQuery Validate 验证,校验规则写在控件中的具体实例
-
JQuery EasyUI 动态改变表单项的验证规则
-
Easyui 修改jquery validatebox为英文校验提示为中文提示
-
轻松学习jQuery插件EasyUI EasyUI表单验证_jquery
-
jQuery Validate表单验证插件 添加class属性形式的校验_jquery