jQuery Validate 小案例,让你了解jQueryValidate

最新推荐文章于 2024-06-29 14:47:07 发布

生如夏花帅

最新推荐文章于 2024-06-29 14:47:07 发布

阅读量1.4k

点赞数 1

分类专栏： It 文章标签： jQuery Validate

本文链接：https://blog.csdn.net/qq_37962402/article/details/76348810

版权

It 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

下面这是我的一个小程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.2.1.js" type="text/javascript"></script>
		<script src="js/jquery.validate.js" type="text/javascript"></script>
		<script>
			$(document).ready(function () {
            $('#formTest').validate({//jquery是表单验证
            	onfocusout: function(element) { $(element).valid(); },//这是定义鼠标失去焦点则触发,默认的是点击提交之后验证
                rules: {//定义验证规则
                    name1: { required: true, },//此文本框是否是必填,此处写的是文本框的name属性,不是id,折痕重要
                    password: { required: true,minlength:2 }//minlength是限制长度,最少2个字符
                },
                messages: {
                    name1: {required:"name"},//这是用来显示出错的信息,默认是英文,如果要是让显示中文,需要导入validate_messages
                    password: {
                        required: "password",//如果什么都不填就会在password后面显示password
                        minlength: jQuery.validator.format("{0}Password"), //{0}是接收minlength的值                       
                    }
                }
            });
        });
		</script>
	</head>
	<body>
		<form id="formTest" action="" method="post">
			<span>用户名:</span><input type="text" id="name1" name="name1"><br/>
			<span>密 码:</span><input type="text" id="password" name="password"><br/>
			<button name="登录" value="登录">登录</button>
		</form>
	</body>
</html>

这是我的一个小程序,刚开始从网上下载了很多爱丽,但是都没有成功,最后自己尝试很多次之后终于可以运行了.在这里面有很多重要的点.在这里再给大家提示一下: 1.默认的错误提示是英文. 2.规则和错误里面,写的是name属性,不是id 3.jquery validate默认的是form提交,就是点击submit按钮之后,才会显示错误. 4.如果表单中没有submit也是可以的,那就需要使用焦点失去之后进行验证. 重要提示:在jQuery Validate中,必须使用form提交,但是如果你没有想要提交的东西,还又想要验证,那么你可以使用焦点失去验证,来改变他默认的submit提价就可以了. 目前自己就学了这么多,谢谢大家观看,如果有什么好的建议,可以提出来大家一起学习

我自己上传了一点jQuery的.js文件,大家如果有需要可以去下载,不需要积分http://download.csdn.net/detail/qq_37962402/9914743