文档章节

jQuery的validate插件

GusFring
 GusFring
发布于 2017/09/02 10:51
字数 381
阅读 13
收藏 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
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
jquery.validate使用攻略

主要分几部分 jquery.validate 基本用法 jquery.validate API说明 jquery.validate 自定义 jquery.validate 常见类型的验证代码 下载地址 jquery.validate插件的文档地址 http://docs.jquery...

引鸩怼孑
2015/07/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

计算卷积神经网络浮点数运算量

前言 本文主要是介绍了,给定一个卷积神经网络的配置之后,如何大概估算它的浮点数运算量。 相关代码:CalFlops,基于MXNet框架的 Scala 接口实现的一个计算MXNet网络模型运算量的demo。 正文...

Ldpe2G
今天
1
0
Sql语言与MySql数据库

1. 数据库简介 1. 数据库,就是存储数据的仓库,只能通过sql语言来访问,数据库也是一个文件系统。通常,MySQL、Oracle等数据库,也被称为关系型数据库,其保存的不仅仅只是数据,还包括数据...

江左煤郎
今天
1
0
IDEA 取消自动import .*

打开设置 > Editor > Code Style > Java > Scheme Default > Imports ① 将 Class count to use import with "*" 改为 99 (导入同一个包的类超过这个数值自动变为 * ) ② 将 Names count ......

乔老哥
今天
3
0
PostGIS学习笔记(开篇)

PostGIS事实上算是笔者开始写博客的第一篇内容。而事实上那篇博文的内容并不丰富,笔者对PostGIS的了解仍然不多,然而17年在OSGeo课程学习时对PostGIS又有了进一步了解,并逐步发现它的强大。...

胖胖雕
今天
3
0
【Centos】在nginx服务器中配置php和mysql

接上一章《【Centos】利用Vultr服务器和namesilo布网》(https://my.oschina.net/u/3776619/blog/2051986),在Centos中配置好nginx,并在iptables中开启了80端口,和为了远程mysql操作方便开...

yongh701
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部