【web前端(四十二)】javascript_jquery_表单校验_javaweb提交表单数据之前要javascript检查-优快云博客

本文介绍了一种使用jQuery进行客户端表单验证的方法，包括非空检查和长度限制，以减少服务器负担，提高用户体验。

我们在填写表单，提交信息之前，往往要做一些客户端的校验。如果我们将输入时一些简单的错误信息，或不符合规则的信息给服务器端发送过去。那么，服务器端就会再将信息发送回客户端。如果这样往返较为频繁，就会影响服务器的性能。所以，我们在提交之前，就会做一些表单的校验。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>表单校验</title>
		<script type="text/javascript" src="../js/jQuery/jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			$(
				function() {
					/**
					 * 非空校验
					 */
					//首先，我们要找到表单。
					function isNull(jquery) {
						//取input的对象的value属性，
						//而相反设置值，是在圆括号里的双引号里写内容。
						var str = jquery.val();
						//这里判断，为空不能提交，会以醒目文字提示。
						if(str == null || str == "" || str.length == 0) {
							    //追加一个	块标记
							//var megs=$("<span></span>");
							    //往块里加内容
							//megs.html(jquery.name+"属性不允许为空");
							    //给内容添加颜色属性
							//mesg.css("color","red");
							    //在传上来的input标签后面加上面的内容
							//jquery.after(megs);
							alert(jquery.attr("name") + "属性不允许为空");
							return false;
						}
						return true;
					}

					/**
					 * 长度校验
					 */
					function length(jquery, minlen, maxlen) {
						//取input的对象的value属性值
						var str = jquery.val();
						if(str.length <= minlen || str.length >= maxlen) {
							//var megs=$("<span></span>");
							//megs.html(jquery.attr("name")+"属性值的长度必须在"+minlen+"到"+maxlen+"之间");
							//megs.css("color","red");
							//jquery.after(megs);
							alert(jquery.attr("name") + "属性值的长度必须在" + minlen + "到" + maxlen + "之间");
							return false;
						}
						return true;
					}

					/*校验*/
					$("form").on("submit",
						function(event) {
							//这里是一个标签选择器，
							//选中所有的input对象。
							//然后，我们再给input里面加标签。
							//这又是一个交集选择器，
							//即意思是name属性的值，
							//等于"name"的input标签。
							//传进去。看返回的是true还是false。
							//							return isNull($("input[name='name']"));
							if(!isNull($("input[name='name']")) ||
								!isNull($("input[name='pwd']")) ||
								!isNull($("input[name='confirm']")) ||
								//名字不能小于6个字符，大于16个字符
								!length($("input[name='name']"), 6, 16) ||
								//密码不能小于6位，大于16位
								!length($("input[name='pwd']"), 6, 14) ||
								//校验不能小于6位，大于16位
								!length($("input[name='confirm']"), 6, 14)) {

								event.preventDefault();
							}
						}
					);
				}
			);
		</script>
	</head>

	<body>
		<form action="#" method="post">
			姓名：<input name="name" type="text" /><br /> 密码：
			<input name="pwd" type="password" /><br /> 校验：
			<input name="confirm" type="password" /><br /> 性别：
			<input type="radio" value="m" name="sex" />男
			<input name="sex" type="radio" value="f" />女<br /> 爱好：
			<input type="checkbox" name="fav" />吹
			<input type="checkbox" name="fav" />拉
			<input type="checkbox" name="fav" />弹
			<input type="checkbox" name="fav" />唱<br />
			<input type="submit" />
			<input type="reset" /><br/>
		</form>
	</body>

</html>