Mvc 验证和加载器

Posted 2023-05-09

【中文标题】Mvc 验证和加载器

【英文标题】：Mvc validation and loader

【发布时间】：2017-04-24 13:05:24

【问题描述】：

在 MVC 视图中的表单发布方法中， 如果验证触发，则加载程序不应出现并仅显示验证 否则不会触发验证，然后加载程序应该来保存数据。

我尝试过的：

在 javascript 中的表单提交上放置加载器并禁用按钮。

$("#frmContact").submit(function (e) 
        $(".loading").css("display", "inline");
    );

1) 加载器：问题是如果验证触发，加载器也会伴随验证，然后需要重新加载页面并输入数据。

2) 禁用提交按钮：如果我在单击时禁用提交按钮并且如果验证触发，那么在按钮之后仍然是禁用而不是启用。因此，如果存在验证，则启用该按钮，如果验证未触发，则禁用该按钮。

所有这些都是为了避免重复条目，就像按钮启用然后如果用户点击提交。

【问题讨论】：

你的意思是如果没有验证错误就应该提交表单，如果有错误怎么办？

是的，如果没有验证错误，则应提交表单，加载程序应在处理过程中显示，但如果存在验证错误，加载程序不应显示，仅显示验证。跨度>

不清楚您的期望。提交后，您立即离开页面。你的$(".loading").css("display", "inline"); 有什么意义 - 充其量它只会显示一瞬间

嗨，斯蒂芬，我所期待的是，如果显示模型验证，则加载程序不应该出现，只显示验证消息，如果没有验证消息，那么加载程序应该出现。上面的代码只是我这样显示加载器的示例。当我提交时，加载器正在显示，我不会立即离开页面。将记录保存到数据库后，我就离开了。

您不理解我的评论吗？提交后立即离开当前页面-您的“加载程序”毫无意义

【参考方案1】：

你可以这样做

html：

<div id="ajax-loader" style="display:none;">
     <img src="<?php echo $loaderSrc; ?>" style="height: 200px;width: 200px;">
</div>

<input type="submit" id = "btnSubmit" value="Submit" name="yt0" onclick="return validateForm();">

在脚本中：（在这里您可以更改字段...我正在展示我的示例之一）

var error_flag = true;
var error_required = true;

$('#btnSubmit').click(function(e)
    e.preventDefault();
    if(error_flag && error_required)
            $("#ajax-loader").css("display", "block");
           $('form#login-form').submit();
    
);

function validateForm()

var user_pass = document.getElementById('LoginForm[user_pass]').value;
var dob = document.getElementById('LoginForm_dob').value;
var re_pass = document.getElementById('re_pass').value;
var user_name = document.getElementById('LoginForm[user_name]').value;
var email = document.getElementById('LoginForm[email]').value;
var tnc = document.getElementById('checkbox1').checked;
// alert(tnc);
var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]0,66)\.([a-z]2,6(?:\.[a-z]2)?)$/i;

if(user_name == '')
  validate('LoginForm[user_name]','Nick name is required.');
else if(email == '')
  removeerror('LoginForm[user_name]');
  validate('LoginForm[email]','Email is required.');
else if(!filter.test(email))
  removeerror('LoginForm[email]');
  validate('LoginForm[email]','Please enter valid email.');
else if(user_pass == '')
  // removeerror('LoginForm[email]');
  validate('LoginForm[user_pass]','Password is required.');
else if(user_pass.length < 6)
  removeerror('LoginForm[user_pass]');
  validate('LoginForm[user_pass]','Min length should be 6.');
else if(re_pass == '')
  removeerror('LoginForm[user_pass]');
  validate('re_pass','Repeat password is required.');
else if(user_pass != re_pass)
  removeerror('re_pass');
  validate('re_pass','Password does not match.');
else if(dob == '')
  removeerror('re_pass');
  validate('LoginForm_dob','Dob is required.');
else
  if(tnc == false)
    document.getElementById('tnc_check').innerHTML = 'Please agree Terms and Condition' ;
    document.getElementById("tnc_check").style.color = "red";
    error_required = false;
  else
    error_required = true;
   document.getElementById("tnc_check").style.display = "none";
   removeerror('LoginForm_dob');
  


function validate(id,msg)
     document.getElementById(id).style.border='4px solid red';
     document.getElementById(id).value = "";
     document.getElementById(id).placeholder = msg;
     error_required = false;

function removeerror(id)
     document.getElementById(id).style.border='none';
     error_required = true;

【讨论】：

这和asp.net-mvc有什么关系！

【参考方案2】：

使用 javascript 检查表单提交或按钮提交事件的验证。

 if($('#MyForms').valid())
 
    // Do something (Valid)
 
 else
 
   // Do something (invalid)
 

【讨论】：

是的，这就是答案。

【参考方案3】：

答案很简单。在表单发布事件中输入有效。一切都是你想要的。

$("#frm").submit(function (e) 
        if ($(this).valid()) 
            $(".loading").css("display", "inline");
        
    );