js 的数据验证和插件

最新推荐文章于 2022-05-25 14:48:25 发布

小叶曲

最新推荐文章于 2022-05-25 14:48:25 发布

阅读量251

点赞数

分类专栏：闲聊文章标签： javascript jquery html5 html

本文链接：https://blog.csdn.net/qq_42490050/article/details/107240043

版权

闲聊专栏收录该内容

7 篇文章 0 订阅

订阅专栏

表单校验

使用 jquery.validate.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单校验</title>
		<!-- CSS only -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
		 crossorigin="anonymous">
		<!-- JS, Popper.js, and jQuery -->
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
		 crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
		 crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
		 crossorigin="anonymous"></script>

		<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
		<style type="text/css">
			.form {
				width: 800px;
				display: block;
				margin: 30px auto;
			}

			label[class*="error"] {
				color: red!important;	
				font-size: 16px!important;
			}

		</style>
	</head>
	<body>
		<form id="form" class="form" action="https://www.baidu.com/s?">
			<div class="form-group">
				<label for="name"> <h5>搜索内容</h5> </label>
				<input type="text" id="name" name="wd" class="form-control" placeholder="请输入搜索内容">
			</div>
			<div class="form-group">
				<label for="page"> <h5>页码</h5> </label>
				<input type="text" id="page" name="pn" class="form-control" placeholder="请输入第几页">
			</div>
			<div class="form-group">
				<label for="tel"> <h5>手机号（测试正则表达）</h5> </label>
				<input type="text" id="tel" name="tel" class="form-control" placeholder="请输入您的手机号">
			</div>
			<div class="form-group">
				<label><h5>编码格式</h5></label>
				<input type="radio" name="ie" value="utf-8" checked> utf-8
				<input type="radio" name="ie" value="gbk"> gbk
			</div>
			<div class="checkbox">
				<input type="submit" value="提交" class="btn btn-primary">
			</div>
		</form>
	</body>
	<script type="text/javascript">
		$("#form").validate({
			rules: {
				wd: {
					required: true, // 必须填写
					minlength: 2, // 最小长度为2
					maxlength: 10 // 最大长度为5
				},
				pn: {
					required: true,
					checkPAGE: true
				},
				tel: {
					required: true,
					checkTEl: true
				},
				ie: {
					required: true,
				}
			},
			messages: {
				wd: {
					required: "*搜索内容为必填项",
					minlength: "*最小长度为2",
					maxlength: "*最大长度为10"
				},
				ie: {
					required: "编码格式为必填项"
				}
			}
		});
		//自定义正则表达示验证方法
		$.validator.addMethod("checkPAGE", function(value, element, params) {
			var checkPAGE = /^([1-9]|10)$/;
			return this.optional(element) || (checkPAGE.test(value));
		}, "*页码在1-10之间！");
		//自定义正则表达示验证方法
		$.validator.addMethod("checkTEl", function(value, element, params) {
			var checkTEl = /^1[3456789]\d{9}$/;
			return this.optional(element) || (checkTEl.test(value));
		}, "*请输入正确的手机号码！");

		$("input").blur(function() {
			$("label.error").attr("class", "error form-text text-muted");
		});
	</script>
</html>

参考：https://blog.csdn.net/u014800380/article/details/52106923

轮播图等插件

https://www.swiper.com.cn/

小叶曲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js 的数据验证和插件

表单校验使用 jquery.validate.js<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单校验</title>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/c.
复制链接

扫一扫