脚本宝典收集整理的这篇文章主要介绍了

Express + jQuery validate 插件实现异步表单验证

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

前几天跟着使用 Express + MongoDB 搭建多人博客学着用撘了一个简易博客,原文中的注册页面是点击submit后,把数据提交到服务器进行进行的。这种方式很不友好,于是就做了一个异步验证的页面,如下图:
图片描述

首先来了解一下jQuery validate:

jQuery validate

文档请参见jQuery Validate或者jQuery Validate 官网

默认校验规则:
默认校验规则

所以根据校验规则就很容易知道如何验证必须输入,最短输入长度,最长输入长度,两次密码输入是否相等等等,如下所示:

var validator = $("#signupform").validate({
            rules: {
                name: {
                    required: true,  // 必须输入
                    rangelength: [2,10],  // 输入字符串长度在2-10之间
                },
                password: {
                    required: true,
                    minlength: 6  // 输入字符串最短长度为6
                },
                repassword: {
                    required: true,
                    minlength: 6,
                    equalTo: "#password"  // 输入的值必须和#password中的值相等,用于判断两次输入的密码是否相等
                },
            }
        });

除了默认的校验规则以外,jquery validate还提供了默认的提示,有中文版的哦~位于下载包的 dist/localization/messages_zh.js,也可以自己编写提示信息,如下:

var validator = $("#signupform").validate({
            rules: {
            ...
            },
            messages: {
                name: {
                    required: "请输入用户名",
                    rangelength: jQuery.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
                    remote: jQuery.validator.format("{0} 已经被使用")
                },
                password: {
                    required: "请输入密码",
                    minlength: jQuery.validator.format("密码至少为 {0} 个字符")
                },
                repassword: {
                    required: "请输入密码",
                    minlength: jQuery.validator.format("密码至少为 {0} 个字符"),
                    equalTo: "两次输入的密码不一样"
                }
            }
        });

其实文档里面讲得很清楚明白啦,上面这些不需要和后端有交互,前端直接验证就可以搞定啦,比较简单。但是用户名name需要和后端交互,通过在后端检测用户名是否存在,然后返回给前端。
jquery validate中提供了remote:URL方法来进行异步验证,使用 ajax 方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用 data 选项。如下:

        rules: {
                name: {
                    remote: {
                        url: "/signup/signupcheck",    // 后台处理程序地址
                        type: "post",                  // 数据发送方式
                        dataType: "json",              // 接受数据格式
                        data: {                        // 要传递的数据
                            name: function() {
                                return $("#name").val();
                            }
                        }
                    }
                 }
               }

另外要注意的是:

The serverside resource is called via jQuery.ajax (XMLHttpRequest) and gets a key/value pair corresponding to the name of the validated element and its value as a GET parameter. The serverside response must be a JSON string that must be "true" for valid elements, and can be "false", undefined, or null for invalid elements, using the default error message. If the serverside response is a string, eg. "That name is already taken, try peter123 instead", this string will be displayed as a custom error message in place of the default.

下面就来看看express中怎么写啦:

Express

//  POST /signup/signupcheck 页面,检查用户名是否已经被注册
router.post('/signupcheck',checkNotLogin, function (req, res, next) {
     var name = req.fields.name;       // 得到传送过来的数据

     UserModel.getUserByName(name)     // UserModel是用户操作数据库的模型,getUserByName 方法是查找name用户
         .then(function (user) {
             if (user) {
                 res.json(false);     // 根据validate的文档知道,返回的数据应该是json格式,且应为true或false
             } else {
                 res.json(true);
             }
         })
         .catch(next);
});

然而不会写后台或者懒得写后台的人,也可以使用jQuery mockjax来模拟Ajax请求哦~使用mockjax的代码大概是这样的:

 $(document).ready(function () {
        $.mockjax({
            url:"users.action",
            response: function (settings) {
                var user = settings.data.name,
                        users = ["phr","asdf","zhangshan"];
                this.responseText = "true";
                if($.inArray(user,users) !== -1) {
                    this.responseText = "false";
                }
            },
            responseTime: 500
        });

        // validate signup form on keyup and submit
        var validator = $("#signupform").validate({
            rules: {
                name: {
                    required: true,
                    rangelength: [2,10],
                    remote: {
                        url: "/signup/signupcheck",
                        type: "post",
                        dataType: "json",
                        data: {
                            name: function() {
                                return $("#name").val();
                            }
                        }
                    }
                }
             },
             messages: {
                 name: {
                    required: "请输入用户名",
                    rangelength: jQuery.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
                    remote: jQuery.validator.format("{0} 已经被使用")
                }
             },
             // the errorPlacement has to take the table layout into account
            errorPlacement: function (error, element) {
                error.appendTo(element.next());
            }
          });
       });

最最最后,这个项目的地址是:https://github.com/PuHongru/m...
注册页面的前端代码在:views--signup.ejs
后台检测代码在:routers--signup.js

总结

以上是脚本宝典为你收集整理的

Express + jQuery validate 插件实现异步表单验证

全部内容,希望文章能够帮你解决

Express + jQuery validate 插件实现异步表单验证

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过