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