11分钟学会jquery-validation 表单验证

JavaScript jQuery
前端
发布日期:   2020-04-10
更新日期:   2020-04-10
文章字数:   2.3k
阅读时长:   10 分
阅读次数:  

11分钟学会jquery-validation 表单验证

不为模糊不清的未来担忧，只为清清楚楚的现在努力

jquery-validation 这个jQuery插件使简单的客户端表单验证变得容易，同时仍然提供了大量的自定义选项。如果您要从头开始构建新的东西，而且当您尝试将某些东西集成到具有许多现有标记的现有应用程序中时，它是一个不错的选择。该插件捆绑了一组有用的验证方法，包括URL和电子邮件验证，同时提供了编写自己的方法的API。

一、导入 js 库

<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>

二、默认校验规则

序号    规则    描述
1    required:true    必须输入的字段。
2    remote:"check.php"    使用 ajax 方法调用 check.php 验证输入值。
3    email:true     必须输入正确格式的电子邮件。
4    url:true     必须输入正确格式的网址。
5    date:true     必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6    dateISO:true    必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7    number:true    必须输入合法的数字（负数，小数）。
8    digits:true    必须输入整数。
9    creditcard:    必须输入合法的信用卡号。
10    equalTo:"#field"    输入值必须和 #field 相同。
11    accept:    输入拥有合法后缀名的字符串（上传文件的后缀）。
12    maxlength:5    输入长度最多是 5 的字符串（汉字算一个字符）。
13    minlength:10    输入长度最小是 10 的字符串（汉字算一个字符）。
14    rangelength:[5,10]    输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15    range:[5,10]    输入值必须介于 5 和 10 之间。
16    max:5    输入值不能大于 5。
17    min:10    输入值不能小于 10。

三、内置验证方式

名称            返回类型            描述
required()        Boolean    必填验证元素。
required(dependency-expression)    Boolean    必填元素依赖于表达式的结果。
required(dependency-callback)    Boolean    必填元素依赖于回调函数的结果。
remote(url)        Boolean     请求远程校验。url 通常是一个远程调用方法。
minlength(length)   Boolean     设置最小长度。
maxlength(length)    Boolean     设置最大长度。
rangelength(range)    Boolean        设置一个长度范围 [min,max]。
min(value)        Boolean     设置最小值。
max(value)      Boolean        设置最大值。
email()        Boolean        验证电子邮箱格式。
range(range) Boolean    设置值的范围。
url()        Boolean        验证 URL 格式。
date()        Boolean        验证日期格式（类似 30/30/2008 的格式，不验证日期准确性只验证格式）。
dateISO()    Boolean    验证 ISO 类型的日期格式。
dateDE()    Boolean    验证德式的日期格式（29.04.1994 或 1.1.2006）。
number()    Boolean    验证十进制数字（包括小数的）。
digits()    Boolean    验证整数。
creditcard()    Boolean    验证信用卡号。
accept(extension)    Boolean    验证相同后缀名的字符串。
equalTo(other)    Boolean    验证两个输入框的内容是否相同。
phoneUS()    Boolean    验证美式的电话号码。

jQuery Validate提供了中文信息提示包，位于下载包的 dist/localization/messages_zh.js

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

四、使用规则

$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
    rules: {
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      agree: "required"
    },
    messages: {
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字母组成"
      }, confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母",
        equalTo: "两次密码输入不一致"
      },
      agree: "请接受我们的声明",
    }
});

messages 处，如果某个控件没有 message，将调用默认的信息

五、错误信息修改

errorPlacement：Callback 更改错误信息显示的位置

     参数            类型            描述            默认值
    errorClass    String    指定错误提示的 css 类名，可以自定义错误提示的样式。    "error"
    errorElement    String    用什么标签标记错误，默认是 label，可以改成 em。    "label"
    errorContainer    Selector    显示或者隐藏验证信息,可自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大。
    errorContainer: "#messageBox1, #messageBox2"    
    errorLabelContainer    Selector    把错误信息统一放在一个容器里面。    
    wrapper    String    用什么标签再把上边的 errorELement 包起来。        
   errorPlacement: function(error, element) {
               // Append error within linked label
               $( element )
                   .closest( "form" )
                       .find( "label[for='" + element.attr( "id" ) + "']" )
                           .append( error );
           },
   errorElement: "span",

六、异步验证

remote: {
    url: "check-email.php",     //后台处理程序
    type: "post",               //数据发送方式
    dataType: "json",           //接受数据格式   
    data: {                     //要传递的数据
        username: function() {
            return $("#username").val();
        }
    }
}

远程地址只能输出 “true” 或 “false”，不能有其他输出。

七、注册功能验证例子

- regist.jsp:

<%--
  author: athink
  time: 2019/7/22 18:47
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>regist</title>
    <title>regist</title>
    <STYLE type="text/css">
        body {
            margin: 0px;
            padding: 0px;
        }

        #div0 {
            position: absolute;
            /*background-image: url(../img/6.jpg);*/
            background-color: #EEEEEE;
            width: 100%;
            height: 100%;
        }

        #div0 > img {
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: 0.7;
        }

        #div1 {
            position: absolute;
            background: #ccccff;
            width: 380px;
            height: 450px;
            top: 18%;
            left: 28%;
            border: 2px solid #0287CA;
            text-align: left;
            z-index: 2;
        }

        #div1 > div {
            margin-top: 8%;
        }

        #divMsg {
            text-align: center;
        }

        #divForm * {
            margin-bottom: 10%;
            margin-right: 5px;
        }

        #rform {
            position: relative;
            left: 20%;
            font-size: 17px;
        }

        #rform input {
            border: 1px solid #0287CA;
            font-size: 15px;
        }

        #divForm a {
            cursor: pointer;
        }

        /*错误信息*/
        .error {
            color: red;
            font-size: 12px;
        }

        .error1 {
            margin-bottom: 0px;
            margin-right: 0px;
            color: red;
            font-size: 12px;
        }
    </STYLE>
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="../js/jquery.validate.js"></script>
    <script type="text/javascript" src="../js/messages_zh.min.js"></script>
    <script type="text/javascript" src="../js/regist.js"></script>
    <script type="text/javascript">
    </script>
</head>
<body>
<div id="div0">
    <img src="../img/6.jpg" alt="not img">
    <div id="div1">
        <div id="divMsg">
            <h1 style="color: #0287CA">注册</h1>
            <span style="color: red">${msg}</span>
        </div>
        <div id="divForm">
            <form id="rform" method="post" action="${pageContext.request.contextPath}/regist">
                <label for="username"></label><br>
                账号: &nbsp;<input type="text" name="username" id="username"><br>
                <label for="nname"></label><br>
                昵称: &nbsp;<input type="text" name="nname" id="nname"><br>
                <label for="password"></label><br>
                密码: &nbsp;<input type="text" name="password" id="password"><br>
                <input type="submit" value="注册">
                <input type="reset" value="清除">
                <a href="${pageContext.request.contextPath}/jsp/login.jsp">登录</a>
                <input type="hidden" name="isAjax" value="0">
            </form>
        </div>
    </div>
</div>

</body>
</html>

- regist.js:

// 这是注册表单验证
$(function () {
    //给按钮添加变形的手势
    $("#rform>input:gt(2)").css("cursor", "pointer")

    $("#rform").validate({
        //使用规则·
        rules: {
            username: {
                required: true,
                rangelength: [2, 10],
                remote: {
                    url: "../regist",     //后台处理程序
                    type: "post",               //数据发送方式
                    dataType: "json",           //接受数据格式
                    data: {                     //要传递的数据
                        "isAjax": 1,
                        "username": function () {
                            return $("#username").val();
                        }
                    }
                }
            },
            nname: {
                required: true,
                rangelength:
                    [2, 6]
            }
            ,
            password: {
                required: true,
                rangelength:
                    [6, 10]
            }

        },

//错误信息位置显示
        errorPlacement: function (error, element) {
            // Append error within linked label
            $(element)
                .closest("form")
                .find("label[for='" + element.attr("id") + "']")
                .append(error);
        }
        ,

//返回的类型
        errorElement: "span"
    })

    var username2 //解决相同的username 导致内容不改变无法ajax
    /*$("#username").on("keyup change", null, null, function (event) {
        var $firstlabel = $("#rform>label:first")
        var username = $("#username").val()
        if (event.type == "change") {
            if (username.length >= 2 && username.length <= 10) {
                // ajax0(username)
                post0(username)
            }
        } else if (event.type == "keyup") {
            $firstlabel.children("span[class=error1]").remove()
            //解决相同的username 导致内容不改变无法ajax
            if (username2 == username) {
                ajax0(username)
            }
        }
    })
*/

//通过ajax验证
    function ajax0(username) {
        var $firstlabel = $("#rform>label:first")
        $.ajax({
            url: "../regist",     //后台处理程序
            type: "post",               //数据发送方式
            dataType: "json",           //接受数据格式
            data: {                     //要传递的数据
                "isAjax": 1,
                "username": username
            },
            success: function (data) {
                $firstlabel.empty()
                if (data == true) {
                    $firstlabel.append("<span id='username-error' class='error1'>" + "该账号已存在！-" + "</span>")
                    username2 = username
                }
            }
        })
    }

//通过$.post()
    function post0(username) {
        var $firstlabel = $("#rform>label:first")
        $.post("../regist",
            {
                "isAjax": 1,
                "username": username
            },
            function (data) {
                $firstlabel.empty()
                if (data == "true") {
                    $firstlabel.append("<span id='username-error' class='error1'>" + "该账号已存在！-" + "</span>")
                    username2 = username
                }
            })
    }

})

- RegistServlet:

package com.controller;

import com.dao.Userdao;
import com.po.User;
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;

/**
 * author: athink
 * Time: 2019/7/22 18:52
 **/
@WebServlet(name = "RegistServlet", value = "/regist")
public class RegistServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.getSession().removeAttribute("msg");
        //判断是直接注册还是Ajax验证 1：Ajax ,2:注册 ，-1：不操作
        int isAjax = -1;
        String isAjax0 = request.getParameter("isAjax");
        if (isAjax0 != null) {
            isAjax = Integer.parseInt(isAjax0);
        }
        if (isAjax == 1) {
            //通过AJAX查询
            String username = request.getParameter("username");
            Userdao userdao = new Userdao();
            boolean isexit = userdao.selectUsername(username);
            response.getWriter().print(!isexit);
        } else if (isAjax == 0) {
            //注册到数据库
            OldselectUser(request, response);
        } else {
            response.sendRedirect("jsp/regist.jsp");
        }
    }

    private void OldselectUser(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //post中文处理
        request.setCharacterEncoding("UTF-8");

        String username = request.getParameter("username");
        String nname = request.getParameter("nname");
        String password = request.getParameter("password");

        System.out.println("注册： " + "username: " + username + " nname: " + nname + " password:" + password);

        //查询数据库 并获取数据
        Userdao userdao = new Userdao();
        boolean istrue = userdao.selectUsername(username);
        System.out.println(istrue);
        //从数据库查询数据并判断
        if (!istrue) {
            userdao.insertUser(username, nname, password);
            request.setAttribute("msg0", "注册成功！！ ");
            request.getRequestDispatcher("/jsp/login.jsp").forward(request, response);
//            response.sendRedirect(getServletContext().getContextPath()+"/jsp/login.jsp");
            System.out.println("regist successs");
        } else {
            request.getSession().setAttribute("msg", "该账号以注册 重新输入！ ");
//            request.getRequestDispatcher("jsp/regist.jsp").forward(request, response);
            response.sendRedirect("jsp/regist.jsp");
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}
文章作者: Athink
文章链接: https://blog.onfree.cn/posts/792a0b29.html
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Athink !
JavaScript jQuery
赏
评论
  目录