一.jQuery Validate验证框架

1.引入相关插件路径

在https://www.runoob.com/jquery/jquery-plugin-validate.html里引入相关插件路径

 <!--引入jQuery库-->
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <!--前端验证插件-->
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <!--默认的验证错误信息显示内容(中文)-->
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

2. 修改一些规则

 <script>
        $(function (){
            $("#myform01").validate({
                /*设置KEY必须是name属性对应的值*/
                //设置校验规则
                rules: {
                    account: {
                        required: true,//字段必须填写
                        minlength: 5,//字段最小长度为5
                        maxlength: 10,//字段最大长度为10
                    },
                },
                //修改提示信息
                messages:{
                    account: {
                        required: "账号不能为空",
                        minlength: "你输入的字符小于5个",
                        maxlength: "你输入的字符大于10个",
                    },
                },
                //修改触发验证方式
                onfocusout:false,//失去焦点时不验证
                onkeyup:false//按键时不验证
            });
        })
    </script>

在这里插入图片描述

3. 自定义验证规则

jQuery.validator.addMethod("validAccount", function(value, element) {
                let reg = /^[A-Za-z]\w+$/;
                return this.optional(element) || (reg.test(value));//验证
            }, "账号必须以字母开头");//提示信息

在这里插入图片描述

4.异步验证

servlet:

package com.yu.web;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/check/account")
public class AccountCheckServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String account = request.getParameter("username");
        List<String> list = new ArrayList<>();
        list.add("admin123");
        list.add("super123");
        list.add("love123");

        //设置响应回去的内容
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        if (list.contains(account)){
            out.print(false);
        }else{
            out.print(true);
        }
        out.close();
    }
}

  remote:{//异步验证
                            url:"check/account",
                            type:"get",
                            dataType:"json",
                            data:{
                                username:function (){
                                    return $.trim(($("#myAccount").val()));
                                },
                            },
                        }

在这里插入图片描述

整体代码

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>插件验证</title>
  </head>
  <body>
    <form action="http://www.baidu.com" id="myform01">
    账号:<input type="text" id="myAccount" name="account" required autofocus>
    手机:<input type="text" id="myPhone" name="phone" required autofocus>
    <input type="submit" value="自动提交">
    </form>


    <!--引入jQuery库-->
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <!--前端验证插件-->
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <!--默认的验证错误信息显示内容(中文)-->
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

    <script>
        $(function (){
            /*自定义验证规则*/
            jQuery.validator.addMethod("validAccount", function(value, element) {
                let reg = /^[A-Za-z]\w+$/;
                return this.optional(element) || (reg.test(value));//验证
            }, "账号必须以字母开头");//提示信息
            $("#myform01").validate({
                /*设置KEY必须是name属性对应的值*/
                //设置校验规则
                rules: {
                    account: {
                        required: true,//字段必须填写
                        minlength: 5,//字段最小长度为5
                        maxlength: 10,//字段最大长度为10
                        validAccount:true,//启动自定义的验证规则
                        remote:{//异步验证
                            url:"check/account",
                            type:"get",
                            dataType:"json",
                            data:{
                                username:function (){
                                    return $.trim(($("#myAccount").val()));
                                },
                            },
                        }
                    },
                },
                //修改提示信息
                messages:{
                    account: {
                        required: "账号不能为空",
                        minlength: "你输入的字符小于5个",
                        maxlength: "你输入的字符大于10个",
                        remote:"该账号已经被注册"//异步验证提示信息
                    },
                },
                //修改触发验证方式
                onfocusout:false,//失去焦点时不验证
                onkeyup:false,//按键时不验证
                submitHandler:function(form){
                  alert("阻塞作用:可以在提交之前还能做一些事情");
                  //比如return false不使用表单提交
                  //手动设置Ajax提交数据
                  return true;//不能设置false,会阻止提交默认行为
                }
            });
        })
    </script>

  </body>
</html>

二.layer弹出层

1.引入相关插件路径

学习网址:https://layer.layui.com/

 <script src="resources/jquery-1.12.4.min.js"></script>
    <script src="resources/layer/layer.js"></script>

2.警告窗口

 $("#btn1").click(function () {
          /*支持内容中写代码等等*/
          layer.alert("一叶<strong>遮天</strong>", {//内容,属性,点击yes后触发的行为
            title: "我是一个小小的警告窗口",//设置标题
            area: ["500px", "300px"],//设置弹出框大小
            icon: 3,//设置图标
            shade: 0.5,//设置遮罩阴影程度(默认值为0.3)
            closeBtn: 0,//设置关闭键
            btnAlign: "c",//按钮居中(默认右对齐)
            time: 3000,//设置三秒后关闭
          })
        });

在这里插入图片描述

3.询问窗口

$("#btn2").click(function () {
          /*支持内容中写代码等等*/
          layer.confirm("目光<strong style=\"color:pink;\">灼灼</strong>", {//内容,属性,点击yes后触发的行为
            title: "我是一个淡淡的询问窗口",//设置标题
            btn: ['只因你', '风华绝代', '你好美'],
            area: ["500px", "300px"],//设置弹出框大小
            icon: 3,//设置图标
            shade: 0.5,//设置遮罩阴影程度(默认值为0.3)
            closeBtn: 0,//设置关闭键
            btnAlign: "c",//按钮居中(默认右对齐)
          }, function (index) {
            console.log(this, index);
            layer.close(index);//点击后使弹窗关闭
          });
        });

在这里插入图片描述

提示窗口

$("#btn3").click(function () {
          /*支持内容中写代码等等*/
          layer.msg("目光<strong style=\"color:pink;\">灼灼</strong>");//默认几秒后自动关闭
        });

在这里插入图片描述

4.iframe窗口(加载页面)(重要)

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
    <a href="javascript:;" id="btn1">警告窗口</a><br/>
    <a href="javascript:;" id="btn2">询问窗口</a><br/>
    <a href="javascript:;" id="btn3">提示窗口</a><br/>
    <a href="javascript:;" id="btn4">iframe窗口-加载页面(重要)</a><br/>


    <script src="resources/jquery-1.12.4.min.js"></script>
    <script src="resources/layer/layer.js"></script>
    <script>
      $(function (){
        $("#btn1").click(function (){
          /*支持内容中写代码等等*/
          layer.alert("一叶<strong>遮天</strong>",{//内容,属性,点击yes后触发的行为
              title : "我是一个小小的警告窗口",//设置标题
              area : ["500px","300px"],//设置弹出框大小
              icon :3,//设置图标
              shade : 0.5,//设置遮罩阴影程度(默认值为0.3)
              closeBtn : 0,//设置关闭键
              btnAlign : "c",//按钮居中(默认右对齐)
              time : 3000,//设置三秒后关闭
          })
        });
        $("#btn2").click(function (){
          /*支持内容中写代码等等*/
          layer.confirm("目光<strong style=\"color:pink;\">灼灼</strong>",{
            title : "我是一个淡淡的询问窗口",
            btn : ['只因你','风华绝代','你好美'],//设置按钮内容
            area : ["500px","300px"],
            icon :3,
            shade : 0.5,
            closeBtn : 0,
            btnAlign : "c",//按钮居中(默认右对齐)
          },function (index){
            console.log(this,index);
            layer.close(index);//点击后使弹窗关闭
          });
        });
        $("#btn3").click(function (){
          layer.msg()("目光<strong style=\"color:pink;\">灼灼</strong>");
        });
        $("#btn4").click(function (){
          layer.open({
            title : "页面加载",
            type : 2,//2代表iframe层
            area : ['600px','500px'],
            maxmain : true,//支持最大最小框
            content : "check/account",//当type=2时,内容来源设置完整路径
            end: function(index, layero){
              if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
                layer.close(index)
              }
              return false;
            }
          });
        });
      });

    </script>
  </body>
</html>