Form 提交验证

$('body').on('click', 'button.btn.btn-form-save-detail', function (e) {
    e.preventDefault(); 
      var form = this.closest('form');
      //调用刚开始写的验证小方法 
      if (Formverify(form)) return; 
       //下面就是new formdata(form); 
           ......... 
       //ajax提交 
           .........
}）; 

　　

form表单 提交

一种是submit按钮直接提交

    <form asp-action="Create" method="post">
         <input type='text' name="UserName">
            <button type="submit" class="btn btn-info">保存</button>        
    </form>　

另一种是用js脚本 :

    页面：

 //这里假装有一个表单  然后一个提交按钮     
     <button onsubmit="return false;" type="button" class="btn btn-info btn-form-save-detail">保存</button>

　　js:

$('body').on('click', 'button.btn.btn-form-save-detail', function (e) {
    e.preventDefault(); 
var form = this.closest('form');//当前点击提交的表单
var   formdata = new FormData(form);

//提取form的action
    var url = form.action;

//form data extention:为form data新增内容
   formdata = formDataExtention(formdata);

 ///ajax  
});

 

然后ajax:

  $.ajax({
            url: url,
            type: 'post',
            data: formdata,
            processData: false,
            contentType: false,
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                loaded();
                swal({
                    title: "出错了!",
                    text: errorThrown,
                    type: "warning"
                });
            },
            success: function (result) {
 
                if (result.success) {                
                        swal({
                            title: "好消息！",
                            text: result.message,
                            type: "success"
                        });
                       
                      
                    } else {
                        //返回到刚才处理的页面
                        return;
                    }
                }
                else {
                    swal({
                        title: "出错了!",
                        text: result.message,
                        type: "warning"
                    });
                }
                return false;
            }
        });

 

然后根据这两种方式添加Form表单验证：

首先js写一个验证小方法：

function Formverify(obj) {  //obj是传进来的form

    var HasValue = false;//默认返回值是false
    //循环form里面的input
    $(obj).find("input").each(function () {
        //判断input是否含有"required"的class类名 如果有就进行验证
        if ($(this).hasClass("required")) {

            var requiredValue = $(this).val();

             //获取属性data-role  
            var role = $(this).attr("data-role");

            //如果role通过了这些判断说明是kendo 的组件  否则就是普通的html元素
            if (role === "datetimepicker" || role === "dropdownlist" || role === "datepicker") {

                //验证组件值
                if (requiredValue.indexOf("year-month-day") !== -1 || IsNullOrEmpty(requiredValue)) {
                     //验证通过
                    $(this).parents(".required").addClass("bd-1 bd-danger");               
                    HasValue = true; //通过则返回true
                    return; //停止each循环
                } else {
                   //验证失败
                    $(this).removeClass("bd-danger");
                }
            } else {
                  //普通页面元素验证
                if ($.trim(requiredValue) === "") {
                   //验证通过
                    $(this).addClass("bd-danger");
                    HasValue = true;//通过则返回true
                    return;//停止each循环
                } else {
                  //验证失败
                    $(this).removeClass("bd-danger");
                }
            }
        }
    }
    );
    return HasValue;  //返回
}

根据第一种f方式验证:

先写一个onsubmit的事件来调用上面的验证小方法：

function IsSubmit(obj) {
    if (Formverify($(obj))) return false;
        else return true;
    }

然后在form 里面调用

<form asp-action="Create" method="post"   onsubmit="return IsSubmit(this)">
         <input type='text' name="UserName" data-role>
            <button type="submit" class="btn btn-info">保存</button>        
 </form>　

第二种方式验证：

$('body').on('click', 'button.btn.btn-form-save-detail', function (e) {
    e.preventDefault(); 
      var form = this.closest('form');
      //调用刚开始写的验证小方法 
      if (Formverify(form)) return; 
       //下面就是new formdata(form); 
           ......... 
       //ajax提交 
           .........
}）;