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

(编辑：jimmy 日期: 2024/10/5 浏览：2)

Web前端数据校验组件

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

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

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

rules: {
  email:{
  validator: function(value){
   return ..."color: #800000">自定义校验规则
添加新的校验规则时最好不要在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 /^[+|-]"color: #800000">自定义规则使用方式

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

<pre name="code" class="javascript"><span style="font-size:18px;"><script src="/UploadFiles/2021-04-02/p>



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

        
            上一篇：javascript省市区三级联动下拉框菜单实例演示
            下一篇：实例解析jQuery插件EasyUI最常用的表单验证规则

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

一句话新闻

最新资源