表单校验与正则表达式
JQuery系列至此完结撒花~~
表单校验
submit()的返回值会决定表单是否真正提交，如果 返回值是true则提交，false则不提交。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#myForm").submit(function(){
var $uname = $("#username").val();
var $uPassword = $("#password").val();
if( $uname.length < 2 || $uname.length >= 6 ) {
alert("用户名长度必须是2~ 6");
return false;
}
if( $uPassword.length <= 6 ) {
alert("密码长度必须大于6位");
return false;
}
return true;
});
});
</script>
</head>
<body>
<form id = "myForm" action="index.html">
用户名:<input id="username"><br>
密码：<input id = "password" type="password" ><br>
<button type="submit">提交</button>
</form>
</body>
</html>
正则表达式
常见校验规则
手机号码校验
/^1[0-9]{10}$/
邮箱格式形如
123_hello@163.com
hello@sina.com.cn
/^\w+@[a-zA-Z0-9]{2,4}\.[a-zA-Z]{2,3} (\.[a-zA-Z]{2,3} )? $/
提示语可以使用标签显示
例如
<!-- 将font标签隐藏起来-->
<font style="display:none" id ="tipFont">邮箱有误</font>
<!-- 校验错误时 在设置其display的属性值为inline或者block -->
$("#tipFont").css("display","inline");