您的位置：首页 > Web前端 > JQuery

jQuery Validate 小案例,让你了解jQueryValidate

2017-07-29 18:30 162 查看

下面这是我的一个小程序

<!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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery Validate

相关文章推荐

新的分享

章节导航