jquery.validate 自学自写

以前的项目表单验证都是 系统自带的 这次 要自己写表单验证 还真遇到不少问题 我先说一下 jquery.validate 成功运行的条件

1.页面要先加载完成 因为我使用requirejs跳转页面 跟以前写jsp页面不太一样 validate 验证代码要保证放在页面加载完成之后。


2.校验的字段 id 和 name 属性都要有，并且保持一致。


3.要有一个 type为 submit的button组件放在form表单中。

然后是验证代码

    $("#submitform").validate({
    //用来保证失去焦点就开始验证
        onfocusout: function(element) { $(element).valid(); },
        //验证规则
                    rules: {
                        code: "required",
                        name: "required",
                        username: {
                            required: true,
                            minlength: 2
                        },
                        lastName: {
                            required: true,
                            minlength: 5
                        },
                        confirm_password: {
                            required: true,
                            minlength: 5,
                            equalTo: "#password"
                        },
                        email: {
                            required: true,
                            email: true
                        },
                        topic: {
                            required: "#newsletter:checked",
                            minlength: 2
                        },
                        agree: "required"
                    },
                    //验证失败提醒
                    messages: {
                        code: "请输入您的名字",
                        name: "请输入您的姓氏",
                        username: {
                            required: "请输入用户名",
                            minlength: "用户名必需由两个字母组成"
                        },
                        lastName: {
                            required: "请输入密码",
                            minlength: "密码长度不能小于 5 个字母"
                        },
                        confirm_password: {
                            required: "请输入密码",
                            minlength: "密码长度不能小于 5 个字母",
                            equalTo: "两次密码输入不一致"
                        },
                        email: "请输入一个正确的邮箱",
                        agree: "请接受我们的声明",
                        topic: "请选择两个主题"
                    },
                    //失败信息存放的地方
                    errorPlacement: function(error, element) {
                        error.appendTo(element.parent());
                    },
                    //验证成功后会执行的方法可以写在里面
                    submitHandler:function(form) {
                        viewModel.submitForm();
                    }
                });

页面代码太长就不写了

我字段代码是用

<input type="text" class="form-control" id="username" name="username" placeholder="">

我提交按钮代码是用

<button type="submit" class="btn btn-primary" data-bind="">
&nbsp;&nbsp;保存&nbsp;&nbsp;
</button>

这样jquery验证也就差不多了，多余的功能可以自己加。