下面是jQuery实现简单的表单验证的完整攻略：
1. 导入jQuery库文件
要使用jQuery，首先需要在页面头部导入jQuery库文件，可以从官网下载或直接使用CDN加速链接。示例：
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
2. 给表单元素添加验证规则
针对表单元素的常规验证规则，可以使用jQuery提供的一些选择器和正则表达式来进行筛选，并给满足规则的元素添加需要的属性和样式。示例：
<!-- 示例1：邮箱格式验证规则 -->
<input type="text" id="email" placeholder="请输入邮箱">
<span id="emailError" style="display:none;color:red;">邮箱格式不正确</span>
<script>
$(function() {
$(document).on("blur", "#email", function() {
var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
var email = $(this).val();
if (!reg.test(email)) {
$("#emailError").show();
} else {
$("#emailError").hide();
}
});
});
</script>
<!-- 示例2：密码长度验证规则 -->
<input type="password" id="password" placeholder="请输入密码">
<span id="passwordError" style="display:none;color:red;">密码长度必须在6-12位之间</span>
<script>
$(function() {
$(document).on("blur", "#password", function() {
var password = $(this).val();
if (password.length < 6 || password.length > 12) {
$("#passwordError").show();
} else {
$("#passwordError").hide();
}
});
});
</script>
3. 表单提交时进行统一校验
当表单中有多个元素需要校验时，可以在表单提交之前进行统一校验，如果不满足规则则取消提交操作。示例：
<!-- 示例3：表单提交时进行统一校验 -->
<form id="demoForm" action="">
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="text" name="email" placeholder="请输入邮箱">
<input type="submit" value="注册">
</form>
<script>
$(function() {
$("#demoForm").submit(function() {
var flag = true;
var username = $("input[name='username']").val();
var password = $("input[name='password']").val();
var email = $("input[name='email']").val();
var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
if (username.length < 2) {
$("#usernameError").show();
flag = false;
}
if (password.length < 6 || password.length > 12) {
$("#passwordError").show();
flag = false;
}
if (!reg.test(email)) {
$("#emailError").show();
flag = false;
}
return flag;
});
});
</script>
在该示例中，统一校验了表单中的用户名、密码和邮箱三个元素，如果其中任意一个不满足规则，则不允许提交表单，同时会在对应的错误提示信息下显示错误提示。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现简单的表单验证 - Python技术站
微信扫一扫 
支付宝扫一扫 