一、说在前面

昨天 学习了ajax的相关知识
今天

学习表单校验插件validate，

并使用ajax 自定义校验规则

二、validate 插件

1、网络上有许多成熟的插件共使用者参考，插件就是将jquery实现的常用操作进行封装，封装后的小框架就可以叫做插件，按照插件的语法去操作可以实现很多复杂的功能，而这些复杂功能的背后实现我们可以不必懂。

2、导入插件的步骤：

1) 将jquery的原始文件和插件文件jquery.validate.js导入到工程中

2) 编写js代码对表单进行验证

3、表单验证的格式：

1）json数据格式：

{
　　rules:{
　　　　表单项name值:校验规则，
　　　　表单项name值:校验规则... ...
　　},
　　messages:{
　　　　表单项name值:错误提示信息，
　　　　表单项name值:错误提示信息... ...
　　}
}

2）其中：校验规则，可以是一个也可以是多个，如果是多个使用json格式

3）常用校验规则如下：

4） 注意：当错误提示信息不按照我们预想的位置显示时，我们可以按照如下方式进行设置

1> 自定义错误显示标签放在我们需要显示的位置，当此表单项验证不通过时会将此信息自动显示出来，jquery验证插件会自动帮助我们控制它的显示与隐藏

<lable for="html元素name值" class="error" style="display:none">错误信息</lable>

2> 如果设置了错误lable标签就不必在messages中设置此表单项错误提示信息了

4、自定义校验规则

如果预定义的校验规则尚不能满足需求的话可以进行自定义校验规则：

1) 使用$.validator.addMethod("校验规则名称",function(value,element,params)){}

2) 在rules中通过校验规则名称使用校验规则

3) 在messages中定义该规则对应的错误提示信息

4) 其中： value是校验组件的value值，element是校验组件的节点对象，params是校验规则的参数

三、注册表单案例

1、源代码

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head></head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>会员注册</title>

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />

<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>

<script src="js/bootstrap.min.js" type="text/javascript"></script>

<!-- 引入自定义css文件 style.css -->

<link rel="stylesheet" href="css/style.css" type="text/css" />

<!--引入validate插件js文件-->

<script type="text/javascript" src="js/jquery.validate.min.js"></script>

<!--引入国际化js文件-->

<script type="text/javascript" src="js/messages_zh.js"></script>

<!-- 引入自定义css文件 style.css -->

<link rel="stylesheet" href="css/style.css" type="text/css" />

<style>

body {

    margin-top: 20px;

    margin: 0 auto;

}

.carousel-inner .item img {

    width: 100%;

    height: 300px;

}

font {

    color: #3164af;

    font-size: 18px;

    font-weight: normal;

    padding: 0 10px;

}

.error{

    color: red;

}

</style>

<script type="text/javascript">

$.validator.addMethod(

        "checkUsername",

        function(value,element,params){

            var f = false;

                $.ajax({

                    "async":false,

                    "url":"register?method=checkUsername",

                    "data":{"username":value},

                    "type":"POST",

                    "dataType":"json",

                    "success":function(data){

                        f = data.isExist;

                    }

                });

        return !f;

        }

    );

$(function(){

    $("#registForm").validate({

        rules:{

            username:{

                required:true,

                minlength:3,

                "checkUsername":true

            },

            password:{

                required:true,

                digits:true,

                minlength:6

            },

            repassword:{

                required:true,

                equalTo:"[name='password']"

            },

            email:{

                required:true,

                email:true

            },

            name:{

                required:true,

                maxlength:5

            },

            sex:{

                required:true

            }

        },

        messages:{

            username:{

                required:"用户名不能为空!",

                minlength:"用户名不得少于3位!",

                "checkUsername":"用户名已存在!"

            },

            password:{

                required:"密码不能为空!",

                digits:"密码必须是整数!",

                minlength:"密码不得少于6位!"

            },

            repassword:{

                required:"确认密码不能为空!",

                equalTo:"两次输入密码不一致!"

            },

            email:{

                required:"邮箱不能为空!",

                email:"邮箱格式不正确!"

            },

            name:{

                required:"姓名不能为空!",

                maxlength:"姓名不得多于5位!"

            },

            sex:{

                required:"您没有第三种选择!",

            }

        },

        errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label

        success: function(label) { //验证成功后的执行的回调函数

            //label指向上面那个错误提示信息标签label

            label.text(" ") //清空错误提示消息

                .addClass("success"); //加上自定义的success类

        }

    });

});

</script>

</head>

<body>

    <!-- 引入header.jsp -->

    <jsp:include page="/header.jsp"></jsp:include>

    <div class="container"

        style="width: 100%; background: url('image/regist_bg.jpg');">

        <div class="row">

            <div class="col-md-2"></div>

            <div class="col-md-8"

                style="background: #fff; padding: 40px 80px; margin: 30px; border: 7px solid #ccc;">

                <font>会员注册</font>USER REGISTER

                <form id="registForm" class="form-horizontal" action="${pageContext.request.contextPath }/register?method=register" method="post" style="margin-top: 5px;">

                    <div class="form-group">

                        <label for="username" class="col-sm-2 control-label">用户名</label>

                        <div class="col-sm-6">

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

                                placeholder="请输入用户名">

                        </div>

                    </div>

                    <div class="form-group">

                        <label for="inputPassword3" class="col-sm-2 control-label">密码</label>

                        <div class="col-sm-6">

                            <input type="password" class="form-control" id="password" name="password"

                                placeholder="请输入密码">

                        </div>

                    </div>

                    <div class="form-group">

                        <label for="confirmpwd" class="col-sm-2 control-label">确认密码</label>

                        <div class="col-sm-6">

                            <input type="password" class="form-control" id="repassword" name="repassword"

                                placeholder="请输入确认密码">

                        </div>

                    </div>

                    <div class="form-group">

                        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

                        <div class="col-sm-6">

                            <input type="email" class="form-control" id="inputEmail3" name="email"

                                placeholder="Email">

                        </div>

                    </div>

                    <div class="form-group">

                        <label for="usercaption" class="col-sm-2 control-label">姓名</label>

                        <div class="col-sm-6">

                            <input type="text" class="form-control" id="usercaption" name="name"

                                placeholder="请输入姓名">

                        </div>

                    </div>

                    <div class="form-group opt">

                        <label for="inlineRadio1" class="col-sm-2 control-label">性别</label>

                        <div class="col-sm-6">

                            <label class="radio-inline"> <input type="radio"

                                 id="sex1" value="male" name="sex">

                                男

                            </label> <label class="radio-inline"> <input type="radio"

                                 id="sex2" value="female" name="sex">

                                女

                            </label>

                            <label class="error" for="sex" ></label>

                        </div>

                    </div>

                    <div class="form-group">

                        <label for="date" class="col-sm-2 control-label">出生日期</label>

                        <div class="col-sm-6">

                            <input type="date" class="form-control" name="birthday">

                        </div>

                    </div>

                    <div class="form-group">

                        <label for="date" class="col-sm-2 control-label">验证码</label>

                        <div class="col-sm-3">

                            <input type="text" class="form-control" name="checkCode">

                        </div>

                        <div class="col-sm-2">

                            <img src="./image/captcha.jhtml" />

                        </div>

                    </div>

                    <div class="form-group">

                        <div class="col-sm-offset-2 col-sm-10">

                            <input type="submit" width="100" value="注册" name="submit"

                                style="background: url('./images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 35px; width: 100px; color: white;">

                        </div>

                    </div>

                </form>

            </div>

            <div class="col-md-2"></div>

        </div>

    </div>

    <!-- 引入footer.jsp -->

    <jsp:include page="/footer.jsp"></jsp:include>

</body>

</html>

2、效果

2.12 学习总结 之 表单校验插件validate的更多相关文章

  1. JQuery 表单校验插件 validate 使用纪录

    JS诞生其中一个目的就是将, 服务器端的校验在客户端提前完成, 以避免用户提交数据后, 后台校验报错的糟糕用户体验. 基于JQuery库的有很多优秀的插件, 其中对于浏览器端表单进行验证的基本功能也有 ...

  2. from表单校验插件 validate 实例

    $("#nextSubmit").click(function(){ $("#recovePasswordForm").submit(); }); $(&quo ...

  3. Jquery表单验证插件validate

    写在前面: 在做一些添加功能的时候,表单的提交前的验证是必不可少的,jquery的validate插件就还可以,对于基本的需求已经够了.这里记录下基本的用法. 还是写个简单的demo吧 <htm ...

  4. 【JAVAWEB学习笔记】28_jqueryAjax：json数据结构、jquery的ajax操作和表单校验插件

    Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(J ...

  5. [知了堂学习笔记]_Jquery_Validate 表单校验的使用

    一.效果图: 二.JqueryValidate的好处 在做注册.或者类似以上的表单提交的时候,大家是不是都很烦那种,把数据拿到后台去判断, 可能经过了正则表达式之类的复杂判断,然后发现数据错误.接着通 ...

  6. 表单校验插件（bootstrap-validator）

    表单校验插件(bootstrap-validator) 参考文档 http://blog.csdn.net/nazhidao/article/details/51542508 http://blog. ...

  7. 表单验证插件——validate

    表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options ...

  8. AngularJS 1.2.x 学习笔记（表单校验篇）

    https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...

  9. 案例15-基本的表单校验使用validate

    1 导入插件 <!--引入jquery相关文件 --> <script src="js/jquery-1.11.3.min.js" type="text ...

随机推荐

  1. 洛谷P1009 阶乘之和 题解

    想看原题请点击这里:传送门 看一下原题: 题目描述 用高精度计算出S=!+!+!+…+n! (n≤) 其中“!”表示阶乘,例如:!=****××××. 输入格式 一个正整数N. 输出格式 一个正整数S ...

  2. Linux vim中方向键变成字母的问题

    使用Ubuntu Desktop 18.04 时 发现 vim 在编辑模式的时候,方向键变成了字母ABCD. 原因: Ubuntu预装的是vim tiny版本,安装vim full版本即可解决. 1. ...

  3. win10 安装"pip install orange3" 出现LINK : fatal error LNK1158: cannot run 'rc.exe' 错误的解决办法

    解决办法: 从(本例使用的是64位的python3.6 注意:如果python的版本是32位,则使用x86:如果是64位,则使用x64;) 复制一下两个文件 rc.exe rcdll.dll 到

  4. 操作系统OS，Python - 多进程(multiprocessing)、多线程(multithreading)

    多进程(multiprocessing) 参考: https://docs.python.org/3.6/library/multiprocessing.html 1. 多进程概念 multiproc ...

  5. typeof方法重写（区分数组对象）

    为什么要重写typeof方法? typeof 可以准确的判断除object以外的基础数据类型,但不能区分object类型的具体类型,比如 Array .Date.NULL.NaN 以及自定义类. 观察 ...

  6. iOS项目开发日常之创建文件（协议、类、分类、扩展）

    iOS项目开发过程中,是以不断创建文件的形式进行着的. 创建得比较频繁的文件类型是: 这两个类型中创建的文件有:子类.分类.扩展.协议四种文件,如下:    这四类文件是频繁创建的,我们来看一下各自分 ...

  7. CentOS7.3下载地址

    CentOS 7.3,是CentOS-7系列的第四个发行版本,官方版本号为7.3.1611.该版本的安装映像只有 64 位,具体的安装映像有以下几种: DVD版 推荐(迅雷下载):http://arc ...

  8. PageObject

    import org.openqa.selenium.WebDriver; import org.openqa.selenium.ie.InternetExplorerDriver; import o ...

  9. SSM日常报错

    mybatis配置时出现org.apache.ibatis.binding.BindingException: Invalid bound statement (not found) 解决方法: po ...

  10. MySQL之可视化软件

    MySQL可视化客户端 多款可视化界面,总有一款适合你 个人推荐使用MySQL官方提供的可视化工具. 下载链接 使用方法链接