zoukankan      html  css  js  c++  java
  • 前台验证框架jQuery-Validation-Engine

    github地址:https://github.com/posabsolute/jQuery-Validation-Engine

    一个中文文档地址:http://code.ciaoca.com/jquery/validation_engine/

    普通的验证就不在说了,参考文档以及很明了了。

    这里写一个field的ajax验证吧。

    demo 实现功能是一个简单的唯一性的验证,通过jQuery-Validation-Engine的Ajax提交后台进行验证后返回信息。

    首先,给input class

    <s:input path="title" class="form-control validate[required,ajax[ajaxUnique]] " id="fodderTitle" placeholder="图文消息标题" />
    ajax[ajaxUnique]是ajax的验证ajaxUnique是需要配置的的验证规则,如下

    将对应引入的语言包中的$.validationEngineLanguage.allRules 增加一个Ajax的验证规则,它已经给了注释的示例,

    我这里加的是

    "ajaxUnique": {
                        "url": "/portal/fodder/newValidateTitle.do",
                        "extraData": "",
                        "extraDataDynamic": ['#fodderTitle', '#fodderId'],
                        "alertText": "* 抱歉,您输入的标题已经存在",
                        "alertTextOk": " * 标题可用",
                        "alertTextLoad": "* 正在验证..."
                    }
    参数说明:
      extraData是Ajax请求的参数 如   "extraData": "name=eric",提交到后台的参数名是name,值是Eric

      extraDataDynamic也是请求参数 配置 input中的id,请求时自动根据id获取input的value,提交到后台的参数名称也是这里配置的id

      alertText" "alertTextOk" "alertTextLoad 分别对应错误信息,验证通过,和正在验证时的信息,如何判断正确与否是根据后台的返回信息,

      发送Ajax请求默认get方式 :Client calls url?fieldId=id1&fieldValue=value1 ==> Server
      (fieldId和fieldValue默认会自动传到后台,根据你在那个input上配置了这个ajax验证规则 ,我这里在extraDataDynamic有重复配置了,实际上fodderTitle是可以直接从fieldValue中获取

      后台返回的格式应该是一个数组: Client receives <== ["id1", boolean, errorMsg] Server
      第一个值类型为 String,是接收到 fieldId 的值;第二个值类型为 Boolean,验证通过返回 true,不通过返回 false,第三个错误信息这里我没有用到


    下面看一下后台代码:

    @RequestMapping("/newValidateTitle.do")
        public @ResponseBody
        List<Object> validateTitle(String fodderTitle,String fodderId,String fieldId)
        {
            List<Object> res=new ArrayList<>(2);
            res.add(fieldId);
            if(CommonUtils.isEmpty(fodderTitle)){
                res.add(false);
                return res; 
            }
            List<WxFodderDto> list=fodderService.findByTitle(fodderTitle);        
            if(CommonUtils.isNotEmpty(fodderId)){
                if(list.isEmpty()||(list.size()==1&&list.get(0).getId().equals(fodderId))){
                    res.add(true);
                    return res;  
                }
            }else{
                if(list.isEmpty()){
                    res.add(true);
                    return res; 
                }
            }
            res.add(false);
            return res;
        }
    
    
    



  • 相关阅读:
    paip.禁用IKAnalyzer 的默认词库.仅仅使用自定义词库.
    paip.语义分析分词常见的单音节字词 2_deDuli 单字词 774个
    IFL嵌入式小组技术博客入口导航
    devc++5.0.0.9的调试方法
    getch()、getche()和getchar()之间的区别
    devc++5.0.0.9的调试方法
    声明和定义的区别
    IFL嵌入式小组技术博客入口导航
    C/C++程序到内存分配个人总结
    getch()、getche()和getchar()之间的区别
  • 原文地址:https://www.cnblogs.com/china2k/p/3923579.html
Copyright © 2011-2022 走看看