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验证也就差不多了,多余的功能可以自己加。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值