文档章节

jQuery的validate插件

GusFring
 GusFring
发布于 2017/09/02 10:51
字数 381
阅读 14
收藏 0

 

http://www.runoob.com/jquery/jquery-plugin-validate.html

链接中已经包含了大部分的使用规则,这里记录下一些常见的用法

1.提示变红

<style>
    .error {
        color: red;
    }
</style>

2.自定义提示位置

默认的错误信息提示是在根据name选定的元素的后面添加,所以在这里自定义位置的时候只要在想要的位置上添加即可,此时在script中不需要添加校验规则。

                <div class="form-group opt">
                    <label for="sex1" class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-6">
                        <label class="radio-inline"> <input type="radio" name="sex" id="sex1" value="male" checked="checked"> 男 </label>
                        <label class="radio-inline"> <input type="radio" name="sex" id="sex2" value="female"> 女 </label>
                        <label class="error" for="sex" style="display: none">您没有第三种选择</label>
                    </div>
                </div>

3.自定义校验规则(以用户名是否存在的校验位例)


    $.validator.addMethod(
        //规则名称
        "checkUsername",
        //校验的函数
        function (value, element, params) {
            //value: 输入的内容
            //element:被校验的元素对象
            //params:规则对应的参数值
            //mark一下
            var flag = true;

            //ajax校验
            $.ajax({
                url: "${pageContext.request.contextPath}/checkUsername",
                async: false,
                data: {"username": value},
                type: "POST",
                dataType: "json",
                success: function (data) {
                    flag = !data.isExist;
                }
            });
            return flag;
        }
    );

    $(function () {
        $("#registerForm").validate({
            rules: {
                "username": {
                    "checkUsername": true
                }
              },
            messages: {
                "username": {
                    "checkUsername": "用户名已经存在"
                }
            }
        });
    });

值得注意的一点是: async: 一定要设置为false,否则,ajax函数对于flag是没有意义的,因为回调函数作为入参的话,异步提交的方式会直接返回flag之后,再进行ajax函数调用,当设置为非异步,会等回调函数执行完毕在进行flag的返回。

© 著作权归作者所有

共有 人打赏支持
GusFring
粉丝 10
博文 33
码字总数 14720
作品 0
南京
程序员
私信 提问
自定义jQuery插件Step by Step

自定义jQuery插件Step by Step 1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是R...

wolf_su
2013/07/04
0
0
10 款高质量的 jQuery 表单验证插件

本文整理了几款高质量的jQuery表单验证插件,可以节约web开发者的时间。希望对你有帮助! 列表如下: 1) A Jquery Inline Form Validation 2) Form Validation Using Jquery 3) Using Jquery...

小卒过河
2011/06/28
109.7K
18
jQuery之validate验证表单

访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/ validate是用来验证表单的 以前我们都是用js手动验证 现在可以通过这个插件直接调用别人写好的方法 更加简单方便 vali...

codingcoge
05/19
0
0
前端知识 | 论jQuery如何编写插件

一. jQuery的插件机制 为了方便用户创建插件,jquery提供了jQuery.extend()和jQuery.fn.extend()方法 jQuery.extend(object) ,一个参数的用于扩展jQuery类本身,也就是用来在jQuery类/命名空...

海说软件
08/10
0
0
收藏几个漂亮的login页面验证

大气带JS表单验证功能的注册页面模板1 http://www.js-css.cn/a/css/template/reglogin/2014/0721/1272.html 大气带JS表单验证功能的登录页面模板2 http://www.js-css.cn/a/css/template/reg...

k_k_anna
2015/03/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

oh-my-zsh 自定义

GitHub 地址 基于 oh-my-zsh 的自定义配置,增加了一些个人常用插件与皮肤。 采用的是 git submodule 来维护,包括 oh-my-zsh,之所以这么搞,主要是手头有多台 linux 需要维护, 每台机器、...

郁也风
今天
6
0
Docker安装踩坑:E_FAIL 0x80004005的解决

参考 菜鸟教程--Windows Docker 安装 http://www.runoob.com/docker/windows-docker-install.html 官方文档-Install Docker Toolbox on Windows https://docs.docker.com/toolbox/toolbox_in......

karma123
今天
5
0
js垃圾回收机制和引起内存泄漏的操作

JS的垃圾回收机制了解吗? Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。 JS中最常见的垃圾回收方式是标记清除。 工作原理:是当变量进入环境时,将这个变量标记为“...

Jack088
昨天
17
0
大数据教程(10.1)倒排索引建立

前面博主介绍了sql中join功能的大数据实现,本节将继续为小伙伴们分享倒排索引的建立。 一、需求 在很多项目中,我们需要对我们的文档建立索引(如:论坛帖子);我们需要记录某个词在各个文...

em_aaron
昨天
27
0
"errcode": 41001, "errmsg": "access_token missing hint: [w.ILza05728877!]"

Postman获取微信小程序码的时候报错, errcode: 41001, errmsg: access_token missing hint 查看小程序开发api指南,原来access_token是直接当作parameter的(写在url之后),scene参数一定要...

两广总督bogang
昨天
33
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部