一、说在前面

昨天 学习了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. centos8 docker安装

    官方参考地址:https://docs.docker.com/install/linux/docker-ce/centos/ 下载地址: https://download.docker.com/lin ...

  2. idea隐藏配置文件

  3. java.io.IOException: java.io.FileNotFoundException: /tmp/tomcat.2457258178644046891.8080/work/Tomcat/localhost/innovate-admin/C:/up/154884318438733213952/sys-error.log (没有那个文件或目录)

    环境: Ubuntu18 vue+elementUI 实现文件的上传 报错信息: MultipartFile.transferTo(dest) 报 FileNotFoundException java ...

  4. spring boot中的底层配置文件application.yam(application.property)的装配原理初探

    *在spring boot中有一个基础的配置文件application.yam(application.property)用于对spring boot的默认设置做一些改动. *在spring boot ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：联合使用所有表格类

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Manthan, Codefest 19 (open for everyone, rated, Div. 1 + Div. 2)E（多重集维护）

    #define HAVE_STRUCT_TIMESPEC#include<bits/stdc++.h>using namespace std;long long ans[1000007]; ...

  7. Vue - 监听页面刷新和关闭

    一,在 created中 注册 页面刷新和关闭事件 created() {  window.addEventListener('beforeunload', e => this.test(e)) ...

  8. 0-1背包问题（0-1 knapsack problem）

    0-1背包问题描述:一个正在抢劫商店的小偷发现了n个商品,第i个商品价值 vi 美元,重 wi 磅,vi 和 wi 都是整数.这个小偷希望拿走价值尽量高的商品,但他的背包最多能容纳 S 磅重的商品,S ...

  9. Synchronized用于线程间的数据共享，而ThreadLocal则用于线程间的数据隔离。

    Synchronized用于线程间的数据共享,而ThreadLocal则用于线程间的数据隔离.

  10. word无法切换中文输入法的解决方法

    问题: 在word编辑文字的时候,莫名其妙地出现只能输入英文字母无法输入中文的现象,输入法状态条也不显示,而输入法是正常的(在其他编辑器中可正常输入汉字) 解决方法如下:word 2003:菜单工具- ...