jQuery Validate表单校验插件

最新推荐文章于 2024-08-24 02:20:30 发布

heyimrlin

最新推荐文章于 2024-08-24 02:20:30 发布

阅读量437

点赞数 1

分类专栏： Spring Boot框架文章标签： jQuery Validate表单校验

本文链接：https://blog.csdn.net/sinat_23228689/article/details/100543722

版权

Spring Boot框架专栏收录该内容

7 篇文章 0 订阅

订阅专栏

简介
- jQuery Validate插件可实现客户端的表单验证。
- 提供了一系列的默认校验规则。
- 允许用户编写自定义的校验规则（通过插件提供的API实现）。

使用方法

引入jQuery Validate依赖

	<!-- jquery-validate -->
	<!-- 核心代码 -->
	<script src="https://cdn.bootcss.com/jquery-validate/1.17.0/jquery.validate.js"></script>
	<!-- 扩展的校验方法（包含自定义校验方法） -->
	<script src="https://cdn.bootcss.com/jquery-validate/1.17.0/additional-methods.js"></script>
	<!-- 中文汉化包 -->
	<script src="https://cdn.bootcss.com/jquery-validate/1.17.0/localization/messages_zh.js"></script>

默认校验规则（由jquery.validate.js提供）

序号	规则	描述
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 的字符串（汉字算一个字符）。当为checkbox时，指选中个数。
13	minlength:10	输入长度最小是 10 的字符串（汉字算一个字符）。当为checkbox时，指选中个数。
14	rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。当为checkbox时，指选中个数。
15	range:[5,10]	输入值必须介于 5 和 10 之间。
16	max:5	输入值不能大于 5。
17	min:10	输入值不能小于 10。

默认提示（定义在messages_zh.js中）

	$.extend($.validator.messages, {
	    required: "这是必填字段",
	    remote: "请修正此字段",
	    email: "请输入有效的电子邮件地址",
	    url: "请输入有效的网址",
	    date: "请输入有效的日期",
	    dateISO: "请输入有效的日期 (YYYY-MM-DD)",
	    number: "请输入有效的数字",
	    digits: "只能输入数字",
	    creditcard: "请输入有效的信用卡号码",
	    equalTo: "你的输入不相同",
	    extension: "请输入有效的后缀",
	    maxlength: $.validator.format("最多可以输入 {0} 个字符"),
	    minlength: $.validator.format("最少要输入 {0} 个字符"),
	    rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
	    range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
	    max: $.validator.format("请输入不大于 {0} 的数值"),
	    min: $.validator.format("请输入不小于 {0} 的数值")
	});

根据项目需要自定义校验规则

	$.validator.addMethod("checkPhone", function (value, element, params) {
		var checkPhone = /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/;
		return this.optional( element ) || ( checkPhone.test(value) );
	}, "Please enter the right phone number.");

根据项目需要自定义提示

		messages: {
			userName: {
                required: "请输入用户名",
                minlength: "用户名长度不能少于{0}个字符",
                maxlength: "用户名长度不能超过{0}个字符"
            },
            password: {
                required: "请输入密码",
                minlength: "密码长度不能小于{0}个字母"
            },
            confirm_password: {
                required: "请输入密码",
                minlength: "密码长度不能小于{0}个字母",
                equalTo: "两次密码输入不一致"
            },
            address: {
                required: "请选择地址"
            },
            email: {
                required: "请输入邮箱",
                email: "邮箱格式不正确"
            },
            hobby: {
                required: "请选择爱好",
                minlength: "至少选择{0}项爱好"
            },
            sex: {
                required: "请选择性别"
            },
            file: {
                required: "请上传附件",
                accept: "只支持jpg，jpeg，png或gif后缀的图片"
            },
            stype: {
                required: "请选择订阅方式"
            }
		}

后端校验

remote属性用于实现后端验证，后端接口返回Boolean类型的值即可。

	remot: {
		url: "/makelocks/validate/username",
		type: "get",
		dataType: "json",
		data: {
			userName: function() {
				return $("input[name='userName']").val();
			}
		}
	}

调整错误信息的显示位置

当校验不通过时，默认的错误信息会显示在校验元素的后面，但当检验元素为radio或checkbox时，错误信息的显示位置不当，需进行如下调整

	errorPlacement: function(error, element) { //指定错误信息的显示位置
		if (element.is(':radio') || (element.is(':checkbox') { //如果元素为radio或checkbox
			var eid = element.attr('name'); //获取元素的name属性值
			error.appendTo(element.parent().parent()); //将错误信息添加到当前元素的父类元素后面（根据实际页面位置进行调整）
		} else {
			error.insertAfter(element);
		}
	}

示例

	<body>
	    <form class="form">
	        <div class="form-group">
	            <label>用户名</label>
	            <input type="text" class="form-control" name="userName" placeholder="用户名">
	        </div>
	        <div class="form-group">
	            <label>密码</label>
	            <input type="password" class="form-control" name="password" placeholder="密码">
	        </div>
	        <div class="form-group">
	            <label>确认密码</label>
	            <input type="password" class="form-control" name="confirm_password" placeholder="请再次输入密码">
	        </div>
	        <div class="form-group">
	            <label>手机号</label>
	            <input type="text" class="form-control" name="phone" placeholder="手机号">
	        </div>
	        <div class="form-group">
	            <label>邮箱</label>
	            <input type="text" class="form-control" name="email" placeholder="邮箱">
	        </div>
	        <div class="form-group">
	            <label>地址</label>
	            <select class="form-control" name="address">
	                <option value="">- 请选择 -</option>
	                <option value="1">福州</option>
	                <option value="2">厦门</option>
	                <option value="3">泉州</option>
	            </select>
	        </div>
	        <div class="form-group">
	            <label>爱好</label>
	            <div class="form-check form-check-inline">
	                <input class="form-check-input" type="checkbox" name="hobby" value="1">
	                <label class="form-check-label">游泳</label>
	            </div>
	            <div class="form-check form-check-inline">
	                <input class="form-check-input" type="checkbox" name="hobby" value="2">
	                <label class="form-check-label">唱歌</label>
	            </div>
	            <div class="form-check form-check-inline">
	                <input class="form-check-input" type="checkbox" name="hobby" value="3">
	                <label class="form-check-label">睡觉</label>
	            </div>
	        </div>
	        <div class="form-group">
	            <label>性别</label>
	            <div class="form-check form-check-inline">
	                <input class="form-check-input" type="radio" name="sex" value="1">
	                <label class="form-check-label">男</label>
	            </div>
	            <div class="form-check form-check-inline">
	                <input class="form-check-input" type="radio" name="sex" value="2">
	                <label class="form-check-label">女</label>
	            </div>
	        </div>
	        <div class="form-group">
	            <label>上传图片</label>
	            <input type="file" class="form-control-file" name="file">
	        </div>
	        <div class="form-group">
	            <div class="form-check form-check-inline">
	                <input type="checkbox" class="form-check-input" name="subscribe">
	                <label class="form-check-label">订阅</label>
	            </div>
	        </div>
	        <div class="form-group">
	            <label>订阅方式</label>
	            <div class="form-check form-check-inline">
	                <input class="form-check-input" type="radio" name="stype" value="1">
	                <label class="form-check-label">RSS</label>
	            </div>
	            <div class="form-check form-check-inline">
	                <input class="form-check-input" type="radio" name="stype" value="2">
	                <label class="form-check-label">邮箱订阅</label>
	            </div>
	        </div>
	        <button id="submit" class="btn btn-primary">Submit</button>
	        <button id="reset" class="btn btn-danger">Reset</button>
	    </form>
	</body>
	<script data-th-inline="javascript">
	    $.validator.addMethod("checkPhone", function (value, element) {
	        var checkPhone = /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/;
	        return this.optional( element ) || ( checkPhone.test(value) );
	    }, "请输入正确的手机号码！");
	
	    $(function () {
	        validateRules();
	        $("#submit").on("click", function () {
	            var validator = $(".form").validate();
        		var flag = validator.form();

	            if (flag) {
	                $.ajax({
	                    url: "/makelocks/validate/register",
	                    type: "post",
	                    data: {
	                        userName: $("input[name='userName']").val().trim()
	                    },
	                    dataType: "json",
	                    success: function (r) {
	                        if (r.code === 0) {
	                            window.location.href = "/makelocks/index";
	                            console.log("success:" + r.msg);
	                        }
	                    }
	                });
	            }
	        });
	        $("#reset").on("click", function () {
	            var validator = $(".form").validate();
	            validator.resetForm();
	        });
	    });
	
	    function validateRules() {
	        $(".form").validate({
	            rules: {
	                userName: {
	                    required: true,
	                    minlength: 6,
	                    maxlength: 30
	                },
	                password: {
	                    required: true,
	                    minlength: 6
	                },
	                confirm_password: {
	                    required: true,
	                    minlength: 6,
	                    equalTo: "[name='password']"
	                },
	                phone:{
	                    checkPhone: true
	                },
	                email: {
	                    required: true,
	                    email: true
	                },
	                address: {
	                    required: true
	                },
	                hobby: {
	                    required: true,
	                    minlength: 2
	                },
	                sex: {
	                    required: true
	                },
	                file: {
	                    required: true,
	                    accept: "image/jpg,image/jpeg,image/png,image/gif"
	                },
	                stype: {
	                    required: "[name='subscribe']:checked"
	                }
	            },
	            messages: {
	                userName: {
	                    required: "请输入用户名",
	                    minlength: "用户名长度不能少于{0}个字符",
	                    maxlength: "用户名长度不能超过{0}个字符"
	                },
	                password: {
	                    required: "请输入密码",
	                    minlength: "密码长度不能小于{0}个字母"
	                },
	                confirm_password: {
	                    required: "请输入密码",
	                    minlength: "密码长度不能小于{0}个字母",
	                    equalTo: "两次密码输入不一致"
	                },
	                address: {
	                    required: "请选择地址"
	                },
	                email: {
	                    required: "请输入邮箱",
	                    email: "邮箱格式不正确"
	                },
	                hobby: {
	                    required: "请选择爱好",
	                    minlength: "至少选择{0}项爱好"
	                },
	                sex: {
	                    required: "请选择性别"
	                },
	                file: {
	                    required: "请上传附件",
	                    accept: "只支持jpg，jpeg，png或gif后缀的图片"
	                },
	                stype: {
	                    required: "请选择订阅方式"
	                }
	            },
	            errorPlacement: function (error, element) {
	                if (element.is(':radio') || element.is(':checkbox')) {
	                    var eid = element.attr('name');
	                    error.appendTo(element.parent().parent());
	                } else {
	                    error.insertAfter(element);
	                }
	            }
	        });
	    }
	</script>