表单提交时如何将错误信息传递到页面中,并且保存原来提交数据

曾经何时,你还有我或许都在困惑,如何方便的将验证不通过的表单信息再返回到前台页面,例如我注册一个账号,辛辛苦苦填写了N多项,一个格式验证没有通过,一切都需要充填,虽然Ajax可以解决这个问题,但是我们总不能把所有表单提交都弄成ajax,更何况有若干人就是没事把javascript给禁止了。哎哎,好了解决方案来了,下面以用户登录为例,说说我的解决方案。

服务器端用nodejs实现:

login.html 简单的提交表单

<form action=""  id="loginForm" method="post">

<!--如果提交的信息由用户信息将用户信息填充到表单中-->

<label>手机:</label>
<input type="text"  class="wk_table_input" name="user[mobile]" placeholder="手机号" id="mobile" value="<%if(user){%><%=user.mobile%><%}%>"/><br/>

<label>密码:</label><input type="password"  class="wk_table_input" name="user[pwd]" placeholder="密码" id="pwd" value="<%if(user){%><%=user.pwd%><%}%>"/><br/>

<input type="submit" placeholder=" 登录" class="workteam_public_submit"style="background: #69b754;">
</form>

 <!--如果有错,显示后端返回的错误-->
 <%if(locals.error){%><td class="wpt_td2"><%=error%><%}%>
function login(req, res, next) {
    //如果用户提交了信息,将信息返回到前端页面
    var user = req.body.user;
    res.render("login", {title:‘用户登录‘, user:user });
};
function loginAction(req, res, next) {
    var user = req.body.user;
    if(!user || !user.mobile || !user.pwd) {
        if (req.xhr) {
            res.json({ret:-1, errMsg:‘手机号或密码不能为空‘});
        } else {
            res.locals.error = ‘手机号或密码不能为空‘;
            login(req, res, next);
        }
    } else { 
        if (user.mobile === ‘12345678901‘ && user.pwd === ‘123456‘){
            if (req.xhr){
                res.json({ret:0,errMsg:"",backUrl:""});
            } else {
                res.redirect("/home");
            }
        } else {
            //将错误信息放到locals中,然后调用视图函数
            res.locals.error = "用户名或密码错误";
            login(req, res, next);
        }
    }
    });

?            res.locals.error = ‘手机号或密码不能为空‘;

login(req, res, next);

表单提交时如何将错误信息传递到页面中,并且保存原来提交数据,布布扣,bubuko.com

时间: 2024-10-08 09:48:07

表单提交时如何将错误信息传递到页面中,并且保存原来提交数据的相关文章

SpingMVC中利用BindingResult将错误信息返回到页面中

SpingMVC中利用BindingResult将错误信息返回到页面中. ActionFrom中: private String name; private String password; get()/set()....... JSP中: <form:form id="T51000ActionForm" name="T51000ActionForm" modelAttribute="t51000ActionForm"  method=&q

Laravel在进行表单验证时,错误信息未返回

马上要毕业了,找了现在的这家公司,压力不大,自己也比较喜欢,唯一的遗憾就是手机号莫得换了(找不到换的借口). 进入正题: 之前自己的博客(http://lxiaoke.cn)是用ThinkPHP开发的,公司用的是Laravel,在进行表单验证时,遇到了一个比较简单却又让我头疼了好几天的问题,那就是验证不通过时的错误信息一直获取不到.百度上说什么的都有,最后用下面的方法解决了. 解决办法: 将middlewareGroup中的\Illuminate\Session\Middleware\Start

ExtJS 表单 submit时错误处理

这里不提success,提提Extjs 表单提交的failure方法. 在表单的提交中,当发生异常行为时通常分为三种情况 1. 无法连接到服务器 2. 表单验证错误 3. 业务逻辑错误 对应下面的代码 [javascript] view plaincopy failure = function(form, action){ switch (action.failureType) { case Ext.form.Action.CLIENT_INVALID: Ext.ux.Toast.msg("错误

PHP提交表单失败后保留已填写信息怎么实现?

PHP提交表单失败后如何保留已经填写的信息. PHP提交表单失败后如何保留填写的信息一些方法总结,其中最常用的就是使用缓存方式了,这种方法如果网速慢是可能出问题的,最好的办法就是使用ajax了.1.使用header头设置缓存控制头Cache-control.PHP代码:header('Cache-control: private, must-revalidate'); //支持页面回跳 2.使用session_cache_limiter方法.PHP代码:session_cache_limiter

当有多个form表单请求时如何处理?

问题:当有多个表单请求时如何处理?两种获取form表单 name属性值来区分是哪一个form表单.问题:如何获取name的值呢?<form name="myForm" method="post"action="myServlet/PassParams">解决:两种方法①.在请求处理的后面传递参数例如:action="myServlet/PassParams?formName=myform"优点:可以很方便的解决问题

php测试时不出现错误信息

来源:http://blog.sina.com.cn/s/blog_6c9d65a101013vdj.html 在练习程序时,有时候写错了,在浏览器会打印出出错信息. 可我的程序始终没有出现. 我的环境: 平台软件:apache2+php5+mysql  for linux 浏览器:chromium-browse, IE 几天来测试的时候,如果是谷歌的就显示“服务器错误”,而没有多余的信息.用IE(在阿Q老师的指导下,把IE浏览器本身也设置了)还是显示空白. 这样调试的时候很麻烦,就得一行一行找

VisualSVN设置提交时必须输入日志信息

VisualSVN设置提交时必须输入日志信息 1.svn提交时强制输入提交信息 为了阻止SVN提交空日志信息和垃圾文件可以在SVN服务器端强制必须填写日志信息,这时需用到pre-commit钩子脚本. 2.设置方法 (1)打开VisualSVN管理控制台 (2)右键你要设置的代码仓库 (3)所有任务->Manage Hooks…… (4)编辑“Pre-commit hook",输入如下内容: @echo off :: :: Stops commits that have empty log

Laravel用post提交表单常见的两个错误

最近在自学Laravel,测试用post方法提交表单时碰到两个错误: 1.获取传入的值时,报错如下图所示: 在stackFlow找答案时各种解释都有,但认真读一下报错信息,意思大概是:获取Http传入值方式不允许,检查代码,将偷懒写的: 1 Route::get('test',function(){ 2 // 3 }); 改为用post方法或者any方法接收即可: 1 Route::post('test',function(){ 2 // 3 }); 2.提交表单时,第二个报错信息如下图所示:

Servlet作业2-将表单提交的商品信息输出到页面中

1,表单页面 shangpin.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>商品信息</title> 6 </head> 7 <body> 8 9 商品信息<br> 10 11 <form action="Shp" method="post