为easyui添加多条件验证

easyui的验证框架,validatebox不能有效的支持多个条件的验证,比如中文用户名,既要验证其是中文,又要验证其长度不超过6位时便显得很繁琐,需要反复的为easyui添加验证规则。

在此实现一个多个条件验证的验证规则,使验证规则通过参数传入自定义的验证规则中。

  1. 首先为easyui添加两个验证规则,即验证中文,和长度的规则。
$.extend( $.fn.validatebox.defaults.rules,{
        length : {//验证长度
                        validator : function(value, param) {
                            var len = $.trim(value).length;
                            $.fn.validatebox.defaults.rules.length.message = "输入内容长度必须介于"+param[0]+"和"+param[1]+"之间.";
                            return len >= param[0] && len <= param[1];
                        },
                        message :""
                    },
         chinese : {// 验证中文
                        validator : function(value) {
                            return /^[\Α-\¥]+$/i.test(value);
                        },
                        message : ‘请输入中文‘
                    }

});

2.添加一个验证多条件的规则

 group : {// param的值为[]中值,多条件的验证规则
                        validator : function(value, param) {
                            var flag = false;
                            var message = "验证不通过";
                            for(var i=0;i<param.length;i++){
                                var validatorone = param[i];
                                var validatename =validatorone;
                                var validateParam =null;
                                //取名称和参数
                                if(validatorone.indexOf(‘[‘)>0){
                                    var start = validatorone.indexOf(‘[‘)+1;
                                    var end =validatorone.indexOf(‘]‘);
                                    validateParam =validatorone.substring(start,end).split(‘,‘);
                                    validatename = validatorone.substring(0,validatorone.indexOf(‘[‘));
                                }
                                flag = $.fn.validatebox.defaults.rules[validatename].validator(value,validateParam);
                                message =  $.fn.validatebox.defaults.rules[validatename].message;
                                //验证
                                /*flag = eval("$.fn.validatebox.defaults.rules[validatename].validator(value,validateParam)");
                                message=eval("$.fn.validatebox.defaults.rules[validatename].message");*/

                                 $.fn.validatebox.defaults.rules.group.message = message;
                                 if(!flag){
                                    return flag;
                                 }
                            }
                           return true;
                        },
                        message : ‘验证未通过‘
                    }

  3.调用

  <input name="name" class="easyui-validatebox" required="required" validtype="group[‘chinese‘,‘length[2,25]‘]" />

  由于多条件验证的参数是通过字符串传递的,所以如果子验证中还需要使用引号时需要转义。

    

时间: 2024-10-06 22:01:19

为easyui添加多条件验证的相关文章

IdentityServer4 使用OpenID Connect添加用户身份验证

使用IdentityServer4 实现OpenID Connect服务端,添加用户身份验证.客户端调用,实现授权. IdentityServer4 目前已更新至1.0 版,在之前的文章中有所介绍.IdentityServer4 ASP.NET Core的OpenID Connect OAuth 2.0框架学习保护API . 本文环境:IdentityServer4 1.0  .NET Core 1.0.1 下面正式开始. 新建IdentityServer4服务端 服务端也就是提供服务,如QQ

为CDH 5.7集群添加Kerberos身份验证及Sentry权限控制

4. 为CDH 5集群添加Kerberos身份验证4.1 安装sentry1.点击"操作","添加服务":2.选择sentry,并"继续": 3.选择一组依赖关系 4.确认新服务的主机分配 5.配置存储数据库:在mysql中创建对应用户和数据库: mysql>create database sentry default character set utf8 collate utf8_general_ci; mysql>grant al

easyui 添加dialog

javascript //查看角色所属用户 function roleuser(obj, id) { var C_ID = id; var Url = "/Sys/RoleUserName" + "/" + C_ID; $.getJSON(Url, function (json) { $.each(json, function (i) { $("#roledlg").append(json.Data) $('#roledlg').dialog('

EasyUI添加进度条

EasyUI添加进度条 添加进度条重点只有一个,如何合理安排进度刷新与异步调用逻辑,假如我们在javascript代码中通过ajax或者第三方框架dwr等对远程服务进行异步调用,实现进度条就需要做到以下三点: 在异步刷新之前打开进度条 异步刷新的过程中不断的刷新进度数据 异步刷新之后关闭进度条 详细代码 代码如下所示: <div id="a" class="easyui-dialog" title="进度" data-options=&qu

雷林鹏分享:jQuery EasyUI 数据网格 - 条件设置行背景颜色

jQuery EasyUI 数据网格 - 条件设置行背景颜色 本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不同的颜色. 数据网格(datagrid)的 rowStyler 函数的设计目的是允许您自定义行样式.以下代码展示如何改变行样式: url="data/datagrid_data.json" singleSelect="true" fitColumns="tru

用easyui实现查询条件的后端传递并自动刷新表格的两种方法

用easyui实现查询条件的后端传递并自动刷新表格的两种方法 搜索框如下: 通过datagrid的load方法直接传递参数并自动刷新表格 通过ajax的post函数传递参数并通过loadData方法将数据初始化到表格中 js代码(搜索按钮的点击事件部分): $("#standardQueryBtn").click(function(){//点击搜索按钮的触发事件 if($("#offerid").val() != ""){//判断id搜索框的值是

easyui表单多重验证,动态设置easyui控件

要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最开始的验证代码如下: 1 //学号格式只能为数字 ****//这里没有问题**** 2 number: {//value值为文本框中的值 3 validator: function (value) { 4 var reg = /^[0-9]*$/; 5 return reg.test(value);

day8:struts注册模块添加表单验证功能

利用validation.xml文件对表单进行验证 在action的同一包下添加 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE validators PUBLIC        "-//Apache Struts//XWork Validator 1.0.2//EN"        "http://struts.apache.org/dtds/xwork-validat

扩展easyui 的表单验证

easyui 的validatebox()提供了自定义验证的方法,为此我把一些常用的数据验证汇总了一下,代码如下: 代码 $.extend($.fn.validatebox.defaults.rules, {    CHS: {        validator: function (value, param) {            return /^[\u0391-\uFFE5]+$/.test(value);        },        message: '请输入汉字'    },