jQuery学习：jQuery插件--jQuery Validate

¡Venceremo

已于 2022-11-15 16:16:51 修改

阅读量192

点赞数

分类专栏： jquery 文章标签： jquery 学习前端

于 2022-11-15 16:12:59 首次发布

本文链接：https://blog.csdn.net/weixin_47295886/article/details/127865821

版权

jquery 专栏收录该内容

56 篇文章 1 订阅

订阅专栏

jQuery库

jQuery Plugin Registry

使用菜鸟提供的cdn导入

设置出错的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
		<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
	<style>
		.error{
			color: red;
		}
	</style>
	</head>
	<body>
		<!-- action是目标地址 -->
		<form action="#" id="form">
			
			<p>用户名（必须，最小6位）：<input type="text" name="username" required minlength="6"></p>
			<p>密码（必须6-8位）：<input id="#pwd1" type="password" name="pwd1" required  minlength="6" maxlength="8"></p>
			<p>确认密码（与密码相同）：<input type="password" name="pwd2" required equalTo="#pwd1"></p>
			<p><input type="submit" value="提交"></p>
			
		</form>
		<script>
			$('#form').validate();//开启验证
		</script>
	</body>
</html>

重新定义表单规则:

声明式验证：只需要i声明各种验证规则，可以自定义验证失败信息

			$('#form').validate({
				messages: {
					// 属性名是输入框内部的值
					username: {
						required: '用户名是必须的',
						minlength: '用户名至少6位'
					},
					pwd1: {
						required: '密码是必须的',
						minlength: '密码至少为6位',
						maxlength: '密码最多为8位'
					},
					pwd2: {
						required: '请输入密码',
						minlength: '密码至少为6位',
						maxlength: '密码最多为8位',
						equalTo: '两次密码输入不一致'
					},

				}
			}); //开启验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
		<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
		<style>
			.error {
				color: red;
			}
		</style>
	</head>
	<body>
		<!-- action是目标地址 -->
		<form action="d" id="form">

			<p>用户名（必须，最小6位）：<input type="text" name="username" required minlength="6"></p>
			<p>密码（必须6-8位）：<input id="s" type="text" name="pwd1" required minlength="6" maxlength="8"></p>
			<p>确认密码（与密码相同）：<input type="text" name="pwd2" required minlength="6" maxlength="8" equalTo="#s"></p>
			<p><input type="submit" value="提交"></p>

		</form>
		<script>
			$('#form').validate({
				messages: {
					// 属性名是输入框内部的值
					username: {
						required: '用户名是必须的',
						minlength: '用户名至少6位'
					},
					pwd1: {
						required: '密码是必须的',
						minlength: '密码至少为6位',
						maxlength: '密码最多为8位'
					},
					pwd2: {
						required: '请输入密码',
						minlength: '密码至少为6位',
						maxlength: '密码最多为8位',
						equalTo: '两次密码输入不一致'
					},

				}
			}); //开启验证
		</script>
	</body>
</html>