jquery validationEngine ajax验证优化

验证input,先验证ajax外的规则(删除data-validation-engine中的ajax规则),验证之后自己写ajax来验证,最后再恢复原来的规则

function validateAjax(input,isValidate){
    var $input = $(input), engine = $input.attr("data-validation-engine");

    //验证除ajax外的其他规则
    if(isValidate) {
        //先移除validation中的ajax验证
        $input.attr("data-validation-engine", engine.replace(/,ajax\[.*?\]/, ""));
        //先通过其他规则的验证
        var validateResult = $input.validationEngine("validate");
        //恢复原来的ajax验证
        $input.attr("data-validation-engine", engine);
        if (!validateResult) return false;
    }
    
    //获取验证规则
    var index = engine.indexOf(",ajax");
    if(index < 0) return true;
    var ajaxRule = engine.substring(index);
    ajaxRule = ajaxRule.replace(",ajax[", "").replace("]]","");

    //根据验证规则获取url,可添加
    var url = "", msg = null;
    switch(ajaxRule){
        case ‘a‘: url = "a.html";break;
        case ‘b‘: url = "b.html";break;
    }

    //自定义验证ajax,ajax验证直接用validationEngine默认的ajax验证模式,后台返回值格式["id",boolean]
    if(url != ""){
        $.ajax({
            type:‘GET‘,
            url:url,
            data:{filedValue:$input.val()},
            dataType:‘JSON‘,
            success:function(data){
                if(!data[1]){
                    //错误信息直接写input的ajaxError属性中
                    msg = $input.attr("ajaxError");
                }
            }
        });
    }

    //如果验证失败,则显示失败信息
    if(msg != null) {
        $input.validationEngine("showPrompt", msg, "error");
    }

    return msg == null;
}

form表单全部验证,先调用validate验证所有内容(默认会跳过ajax验证),然后遍历所有有data-validation-engine属性的input,调用上面的方法,验证ajax,然后返回验证结果

function validateAjaxBeforeSubmit(form){
    var $form=$(form), result=true;

    //先验证所有信息
    if(!$form.validationEngine("validate")) return false;

    //遍历跳过的ajax信息
    $form.find("[data-validation-engine]").each(function(){
        if(validateAjax(this, false)) return true;
        else {
            //验证结果设为false并跳出each循环
            result = false;
            return false;
        }
    });

    return result;
}
时间: 2024-10-05 20:11:04

jquery validationEngine ajax验证优化的相关文章

jQuery.validationEngine前端验证

引入相关文件: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/ javascript"></script> <script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="

Jquery ValidationEngine 修改验证提示框的位置

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="

关于JQuery与AJAX验证

AJAX验证,其实就是JS代码,他就是先利用Jquery或JS获取一个值,然后偷偷的把值传送到验证界面,然后在偷偷的把验证后的结果给传回来,利用传回来的结果在进行JS判断,从而不会刷新界面. 用图片解释如下图: 大体过程就是这样,下面用代码来详细的解释一下如何进行用户名的唯一验证.. 1. 首先,在主页面的Html代码页里,写一个Jquery函数,用来获得要验证的值.(蓝色部分是传过去的值,红色部分是接收回来的值) <script> $(document).ready(function ()

jQuery Validate Ajax 验证

<script type="text/javascript"> $(function() { $('#formCityLink').validate({ rules : { link : "required" }, messages : { link : "请输入链接" }, invalidHandler : function(){ console.log('in invalidehandler'); return false; },

springMVC框架中的ajax验证

当然,你在使用springMVC之前需要进行环境的配置,这里就不讲了,直接上代码. 在使用springMVC之前,我在使用ajax验证的时候,需要用到一个解析json的jar包:将数据通过ajax拿到后台servlet,再通过jsonObject对象进行来像前台进行数据的传递.像下面这样: JSONObject j = new JSONObject(); request.setCharacterEncoding("utf-8"); response.setCharacterEncodi

jquery+ajax验证不通过也提交表单问题处理

这篇文章主要介绍了jquery validationEngine中使用ajax验证不通过也提交表单问题处理,需要的朋友可以参考下 validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngine验证表单的形式有几种方式: 1 使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的. 2 使用ajax提交表单,但是没有使用ajax验证. 这种方式也比较简单,在我们使用ajax请求前检查验证是否通过就可以,例

jquery.validate ajax方式验证

在做网站的时候有一块需要用到jquery.validate插件 ajax方式的方式来验证原始密码是否正确,研究了研究加上博客园朋友的帮助,终于实现了.贴出代码 <script type="text/javascript">    $(function () {        $("#form1").validate({            rules: {                pwd: {                    require

表单验证(ASP.NET+jquery.validationEngine.js)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">

利用jQuery实现的Ajax 验证用户名是否存在

异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用jQuery框架实现的AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项