一、说在前面

昨天 学习了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. nginx、apache和tomcat之间的关系和区别

    Apache/Nginx 应该叫做 HTTP Server,即安装后生成httpd服务. Tomcat 则是一个 Application Server,或者更准确的来说,是一个「Servlet/JSP ...

  2. Nginx 反向代理报400错误解决方法！

    如果后端真是的服务器设置有类似防盗链或者根据http请求头中的host字段来进行路由或判断功能的话,如果反向代理层的nginx不重写请求头中的host字段,将会导致请求失败,报400错误,解决办法: ...

  3. Oracle常用SQL时间函数

    1.查询当前日期和时间 select sysdate from dual; 2.查询本月最后一天 select last_day(sysdate) from dual; 3.查询前后多少月 ) fro ...

  4. 解决方法：Could not load file or assembly 'WebGrease, Version=1.5.1.25624, Culture=neutral, PublicKeyToken=31bf3856ad364e35' or one of its dependencies.

    最近使用VS2015调试ASP.NET 程序遇到了该问题: 在网上找了很多方法都不能解决,最后自己解决了,方法如下: 在project -> NuGet管理中找到已安装的所有程序:将Web Op ...

  5. linux压缩包管理

    1.gzip 文件 ----> .gz格式的压缩包 2.bzip2 文件 ----> .bz2格式的压缩包 3.tar -- 不使用z/j参数 该命令只能对文件或目录打包 参数: c -- ...

  6. 使用外网访问Flask项目

    在学习flask过程中,想使用手机访问项目,根据flask手册中可以将 app.run(host='192.168.1.109', port=8000,debug=True) 但是发现手机依然无法连接 ...

  7. leetcode刷题-- 5. 动态规划

    动态规划思路 参考 状态转移方程: 明确「状态」-> 定义dp数组/函数的含义 -> 明确「选择」-> 明确 base case 试题 53最大子序和 题目描述 53 给定一个整数数 ...

  8. 记一次安装体验：pwn工具

    几天前删了JDK,结果和VM在一个目录中,结果VM全没了,重安走起 记载一下安装虚拟机出现的问题,官网一个字....慢,于是找了百度网盘,据说win10版本太低没法用,我就下了vw15.5.0(建立在 ...

  9. TensorFlow基础一（Symbolic Operation）

    比较TensorFlow和Numpy 在Numpy中让两个随机矩阵相乘得到运算的结果: import numpy as np x = np.random.normal(size=[10, 10]) y ...

  10. 【PAT甲级】1025 PAT Ranking (25 分)（结构体排序，MAP<string,int>映射）

    题意: 输入一个正整数N(N<=100),表示接下来有N组数据.每组数据先输入一个正整数M(M<=300),表示有300名考生,接下来M行每行输入一个考生的ID和分数,ID由13位整数组成 ...