Jquery-validate之表单验证

最新推荐文章于 2022-11-23 22:00:29 发布

whoami_zy

最新推荐文章于 2022-11-23 22:00:29 发布

阅读量286

点赞数

分类专栏： AJAX 文章标签： jquery 表单插件

本文链接：https://blog.csdn.net/whoami_zy/article/details/53422079

版权

AJAX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery Validate 插件为表单提供了强大的验证功能.

默认校验规则rules:

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。

messages:
为对应的提示消息

首先先引入两个必须的jquery的js文件。

<script src="jquery/jquery-2.2.2.js"></script>
<script src="jquery/jquery.validate.min.js"></script>

都能在网上自行下载。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script src="jquery/jquery-2.2.2.js"></script>
<script src="jquery/jquery.validate.min.js"></script>
</head>
<body>
<form id="demoForm">
     
       
        <p>
            <label for="username">用户名</label>
            <input type="text" id="username" name="username"/>
        </p>

        <p>
            <label for="password">密码</label>
            <input type="password" id="password" name="password"/>
        </p>

        <p>
            <label for="confirm-password">确认密码</label>
            <input type="password" id="confirm-password" name="confirm-password"/>
        </p>
  <p>
           <button id="check">检查</button>
        </p>
        <p>
            <input type="submit" value="登录"/>
        </p>
    
</form>

<script>
    $(document).ready(function () {
       $("#demoForm").validate({
            
            rules: {
                username: {
                    required: true,
                    minlength: 2,
                    maxlength: 10
                },
                password: {
                    required: true,
                    minlength: 2,
                    maxlength: 16
                },
                "confirm-password": {
                    equalTo: "#password"
                }
            },
            messages: {
                username: {
                    required: '请输入用户名',
                    minlength: '用户名不能小于2个字符',
                    maxlength: '用户名不能超过10个字符',
                    remote: '用户名不存在'
                },
                password: {
                    required: '请输入密码',
                    minlength: '密码不能小于2个字符',
                    maxlength: '密码不能超过16个字符'
                },
                "confirm-password": {
                    equalTo: "两次输入密码不一致"
                }
            },
        });
        $("#check").click(function(){
        	alert($('#demoForm').valid()?"正确":"错误");
        });
    });
</script>

</body>
</html>

errorClass String 指定错误提示的 css 类名，可以自定义错误提示的样式。 "error"
errorElement String 用什么标签标记错误，默认是 label，可以改成 em。 "label"
errorContainer Selector 显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大。
errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer Selector 把错误信息统一放在一个容器里面。
wrapper String 用什么标签再把上边的 errorELement 包起来。
一般这三个属性同时使用，实现在一个容器内显示所有错误提示的功能，并且没有信息时自动隐藏。

errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"

onsubmit Boolean 提交时验证。设置为 false 就用其他方法去验证。 true
onfocusout Boolean 失去焦点时验证（不包括复选框/单选按钮）。 true
onkeyup Boolean 在 keyup 时验证。 true
onclick Boolean 在点击复选框和单选按钮时验证。 true
focusInvalid Boolean 提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点。 true
focusCleanup Boolean 如果是 true 那么当未通过验证的元素获得焦点时，移除错误提示。避免和 focusInvalid 一起用。 false

// 重置表单
$().ready(function() {
 var validator = $("#signupForm").validate({
        submitHandler:function(form){
            alert("submitted");   
            form.submit();
        }    
    });
    $("#reset").click(function() {
        validator.resetForm();
    });

});

whoami_zy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery-validate之表单验证

jQuery Validate 插件为表单提供了强大的验证功能.默认校验规则rules:1 required:true 必须输入的字段。2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。3 email:true 必须输入正确格式的电子邮件。4 url:true 必须输入正确格式的网址。5 date:true 必须输入
复制链接

扫一扫