web_jQuery的插件_校验器

最新推荐文章于 2022-06-07 01:12:43 发布

冰蓝心灵

最新推荐文章于 2022-06-07 01:12:43 发布

阅读量250

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_35537301/article/details/83217499

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.使用步骤

导入jquery.js文件
导入validate.js文件
导入messages_zh.js文件
在页面加载成功后获取所要校验的表单对象

表单对象.validate({

    //rules:校验规则
    rules:{
        name属性值:{
            校验器：校验规则,
            校验器：校验规则
        },
        name属性值:{
             校验器：校验规则,
             校验器：校验规则
        }
    },

    //messages:提示信息
    messages:{
        name属性值:{
            校验器："提示信息",
            校验器："提示信息"
        },
        name属性值:{
            校验器："提示信息",
            校验器："提示信息"
        }
    }
})

2.校验器常用的规则

校验规则	取值	说明
required	true/false	必填项
number	true/false	必须输入为数字
min\|max	数字
range	[startIndex,endIndex]
minLength\|maxLength\|lengthRange
email	@
equalTo	jquery对象

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>validate使用</title>
		<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<!--validate校验库-->
		<script src="../js/jquery.validate.js" type="text/javascript"></script>
		<!--国际化库，中文提示-->
		<script type="text/javascript" src="../js/messages_zh.js" ></script>
		
		<script type="text/javascript">
			$(function(){
				$("#formId").validate({
					rules:{
						username:{
							required:true
						},
						password:{
							required:true,
							number:true
						},
						repassword:{
							equalTo:$("[name='password']")
						},
						zuixiaozhi:{
							min:4
						},
						shuzhiqujian:{
							range:[3,8]
						}
					},
					messages:{
						username:{
							required:"用户名不能为空"
						},
						password:{
							required:"密码不能为空",
							number:"必须为数字"
						},
						repassword:{
							equalTo:"两次输入的密码必须相同"
						},
						zuixiaozhi:{
							min:"最小值为4"
						},
						shuzhiqujian:{
							range:"最小值为{0},最大值为{1}"
						}
					}
				})
			})
		</script>
	</head>

	<body>
		<form id="formId" action="">
			必填：<input type="text" name="username" /> <br/> 必填数字：
			<input type="text" name="password" /> <br /> 必填重复：
			<input type="text" name="repassword" /> <br /> 最小值：
			<input type="text" name="zuixiaozhi" /> <br /> 区间：
			<input type="text" name="shuzhiqujian" /> <br />
			<input type="submit" value="提交" />
		</form>
	</body>

</html>

3.自定义校验器

$.validator.addMethod(
    校验器的名,
    function(value,ele,params){
        value:输入的值
        ele:对应的js对象
        params：对应选择器的取值
                如果匹配：true
                不匹配：false
    },
    "不符合校验规则给出的提示信息"
)

冰蓝心灵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web_jQuery的插件_校验器

1.使用步骤导入jquery.js文件导入validate.js文件导入messages_zh.js文件在页面加载成功后获取所要校验的表单对象表单对象.validate({ //rules:校验规则 rules:{ name属性值:{ 校验器：校验规则, 校验器：校验规则 }, ...
复制链接

扫一扫

专栏目录