Jquery.validate.js表单验证

最新推荐文章于 2024-03-14 07:00:00 发布

0X码上链

最新推荐文章于 2024-03-14 07:00:00 发布

阅读量1.7k

点赞数

分类专栏： web前端技术 Javascript

本文链接：https://blog.csdn.net/wzygis/article/details/24767617

版权

web前端技术同时被 2 个专栏收录

43 篇文章 1 订阅

订阅专栏

Javascript

25 篇文章 0 订阅

订阅专栏

一、用前必备
官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-validation/
API: http://jquery.bassistance.de/api-browser/plugins.html

官方文档：http://docs.jquery.com/Plugins/Validation/Methods

二、引入js文件

三、编写验证js

$(function () {
    $(document.forms[0]).validate({
        rules: {
            UserName: { required: true, minlength: 6, maxlength: 12 },
            Password: { required: true, minlength: 5, maxlength: 12 }
        },
        messages: {
            "UserName": {
                required: "用户名不能为空.",
                minlength: "最少6位",
                maxlength:"最多12位"
            },
            "Password": {
                required:"密码不能为空."
            }
        }
    });
})

四、默认校验规则

(1)required:true               必输字段
(2)remote:"check.php"          使用ajax方法调用check.php验证输入值（下面详细说明）
(3)email:true                  必须输入正确格式的电子邮件
(4)url:true                    必须输入正确格式的网址
(5)date:true                   必须输入正确格式的日期
(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

remote：URL
使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项
remote: "check-email.php"
remote: {
    url: "check-email.php",     //后台处理程序
    type: "post",               //数据发送方式
    dataType: "json",           //接受数据格式
    data: {                     //要传递的数据
        username: function() {
            return $("#username").val();
        }
    }
}

远程地址只能输出 "true" 或 "false"，不能有其它输出

五、默认的提示

messages: {
    required:"This field is required.",
    remote:"Please fix this field.",
    email:"Please enter a valid email address.",
    url: "Pleaseenter a valid URL.",
    date:"Please enter a valid date.",
    dateISO:"Please enter a valid date (ISO).",
    dateDE:"Bitte geben Sie ein g眉ltiges Datum ein.",
    number:"Please enter a valid number.",
    numberDE:"Bitte geben Sie eine Nummer ein.",
    digits:"Please enter only digits",
    creditcard:"Please enter a valid credit card number.",
    equalTo:"Please enter the same value again.",
    accept:"Please enter a value with a valid extension.",
    maxlength:$.validator.format("Please enter no more than {0}characters."),
    minlength:$.validator.format("Please enter at least {0} characters."),
    rangelength:$.validator.format("Please enter a value between {0} and {1}characters long."),
    range:$.validator.format("Please enter a value between {0} and{1}."),
    max:$.validator.format("Please enter a value less than or equal to{0}."),
    min:$.validator.format("Please enter a value greater than or equal to{0}.")
}

如需要修改提示消息，可在js代码中加入：

jQuery.extend(jQuery.validator.messages, {
       required: "必选字段",
  remote:"请修正该字段",
  email:"请输入正确格式的电子邮件",
  url:"请输入合法的网址",
  date:"请输入合法的日期",
  dateISO: "请输入合法的日期(ISO).",
  number:"请输入合法的数字",
  digits:"只能输入整数",
  creditcard:"请输入合法的信用卡号",
  equalTo:"请再次输入相同的值",
  accept:"请输入拥有合法后缀名的字符串",
  maxlength:jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),
  minlength:jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),
  range:jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
  max:jQuery.validator.format("请输入一个最大为{0} 的值"),
  min:jQuery.validator.format("请输入一个最小为{0} 的值")
});

推荐做法，将此文件放入messages_cn.js中，在页面中引入
<script src="../js/messages_cn.js"type="text/javascript"></script>

六、实例：

test.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>JQuery表单验证插件jQuery.validate.js</title>
<style type="text/css">
/******/
form.cmxform label.error, label.error {
color: red;
font-style: italic;
}
</style>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" >
$.validator.setDefaults({
        submitHandler: function() {
                alert("已经提交!");
        }
});

$().ready(function() {
        $("#commentForm").validate({
                rules: {
                    username: {
                            required:true,
                            minlength:2
                    },
                    email: {
                            required: true,
                            email: true
                    },
                    password: {
                        required: true,
                        minlength: 6
                    },
                    confirm_password: {
                        required: true,
                        minlength: 6,
                        equalTo: "#password"
                    }
                },
                messages: {
                    username: {
                            required:"用户名必填",
                            minlength:"至少2个字符"
                    },
                    email:"请输入一个邮件地址",
                    password: {
                        required: "请输入密码",
                        minlength: "密码不能少于6个字符"
                    },
                    confirm_password: {
                        required: "请输入确认密码",
                        minlength: "确认密码不能少于6个字符",
                        equalTo: "密码输入不一致"
                    }
                }
        });

});
</script>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>注册账号</legend>
<p>
<label for="cusername">用户名</label>
<input id="username" name="username" />
<p>
<label for="cemail">邮箱</label>
<input id="email" name="email" />
</p>
<p>
<label for="cpassword">密码</label>
<input type="password" id="password" name="password" value="" />
</p>
<p>
<label for="cconfirm_password">确认密码</label>
<input type="password" id="confirm_password" name="confirm_password" value="" />
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
</body>
</html>

0X码上链

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
Jquery.validate.js表单验证

一、用前必备官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-validation/API: http://jquery.bassistance.de/api-browser/plugins.html官方文档：http://docs.jquery.com/Plugins/Validation/Methods 二、引入
复制链接

扫一扫