一、说在前面

昨天 学习了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. C/C++网络编程3——地址族与数据序列

    C/C++网络编程2中介绍了套接字,这一节介绍给套接字分配ip和端口号.ip用于标识一台主机,端口号用于标识一个主机中的一个应用程序,端口号占16位,0到65535,其中0到1023是知名端口号. 表 ...

  2. iOS开发-真机调试遇到“The executable was signed with invalid entitlements.

    https://www.jianshu.com/p/635574a8ab0e 如果是真机运行relase版 1.Edit Scheme中改成relase 2.更改签名为   自动签名

  3. （踩过的坑）使用Github Page搭建个人博客

    最近需要搭建一个网站,作为导航网址,但是自己的域名备案还要等上几天,就想着有没有别的办法来搭建一个公网可以访问的网站. Github Page的话是一个github个人主页,完全适合用来搭建普通网站. ...

  4. HDU1029 简单DP

    "OK, you are not too bad, em... But you can never pass the next test." feng5166 says. &quo ...

  5. 使用gcc编译c语言解码ascii码

    vi test.c 输入代码: #include<stdio.h> int main(void) { char *p = (char *)"\xE6\x8A\xB1\xE6\xA ...

  6. ES5中的this

    参考资料:>>> this的指向 在 ES5 中,其实 this 的指向,始终坚持一个原理: this 永远指向最后调用它的那个对象 下面我们来看一个最简单的例子:(例子均来自参考资 ...

  7. Uart学习笔记

    分享一个蛮好的链接:https://blog.csdn.net/wordwarwordwar/article/details/73662379 今天在看的资料是S家的DW_apb_uart的官方文档. ...

  8. IntelliJ IDEA 破解之后，用了一段时间后，打开软件提示 no suitable licenses left on the license server

    IntelliJ IDEA 破解之后,用了一段时间后,打开软件提示 no suitable licenses left on the license server 需要让我们重新注册,原来是之前的地址 ...

  9. UniGui学习之部署(06)只 有Loading...，

    procedure TUniServerModule.UniGUIServerModuleBeforeInit(Sender: TObject);begin Self.ExtRoot:='ext-6. ...

  10. windows下hashcat利用GPU显卡性能破解密码

    由于一般密码破解工具的破解速度实在是太慢,而且支持的密码破解协议也不多,暴力破解的话,有的密码1年时间也破不出来,用字典跑的话必须要明文密码在字典里才行,而且密码字典太大的话,也很浪费时间,跑不出来也 ...