jquery前端校验：用户名:密码:性别:兴趣爱好:不能为空，兴趣爱好和性别至少选择一个

好的，针对您的需求，以下是一个基于 jQuery 的前端校验示例代码： ```html <!DOCTYPE html> <html> <head> <title>前端校验示例</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <form id="myForm" action="#" method="post"> <label for="username">用户名：</label> <input type="text" id="username" name="username"><br><br> <label for="password">密码：</label> <input type="password" id="password" name="password"><br><br> <label>性别：</label> <input type="radio" id="male" name="gender" value="male"> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label><br><br> <label>兴趣爱好：</label> <input type="checkbox" id="hobby1" name="hobby1" value="hobby1"> <label for="hobby1">读书</label> <input type="checkbox" id="hobby2" name="hobby2" value="hobby2"> <label for="hobby2">旅游</label> <input type="checkbox" id="hobby3" name="hobby3" value="hobby3"> <label for="hobby3">音乐</label><br><br> <input type="submit" value="提交"> </form> <script> $(function() { // 在表单提交时进行校验 $("#myForm").submit(function() { if($("#username").val() == "") { alert("用户名不能为空！"); return false; } if($("#password").val() == "") { alert("密码不能为空！"); return false; } if($("#male").prop("checked") == false && $("#female").prop("checked") == false) { alert("请选择性别！"); return false; } if($("#hobby1").prop("checked") == false && $("#hobby2").prop("checked") == false && $("#hobby3").prop("checked") == false) { alert("请至少选择一个兴趣爱好！"); return false; } return true; }); }); </script> </body> </html> ``` 这个示例代码中，我们使用了 jQuery 库，然后定义了一个表单，并在其中添加了用户名、密码、性别、兴趣爱好四个输入框。在表单提交时，我们使用 jQuery 的 `submit()` 方法来进行校验。具体来说： - 对于用户名和密码，我们通过 `val()` 方法获取它们的值，然后判断它们是否为空，如果为空则弹出提示框并返回 `false`，阻止表单提交； - 对于性别，我们通过 `prop()` 方法获取男性和女性单选框的选中状态，如果都未选中，则弹出提示框并返回 `false`，阻止表单提交； - 对于兴趣爱好，我们也使用 `prop()` 方法获取三个复选框的选中状态，如果都未选中，则弹出提示框并返回 `false`，阻止表单提交； - 如果以上校验都通过，则返回 `true`，允许表单提交。注意，这个前端校验只是在用户提交表单前进行的校验，为了安全起见，后端也需要对用户提交的数据进行校验。

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通

jquery前端校验：用户名:密码:性别:兴趣爱好:不能为空，兴趣爱好和性别至少选择一个

最新推荐

jQuery Datatables表头不对齐的解决办法

jQuery使用attr()方法同时设置多个属性值用法实例

利用jquery给指定的table动态添加一行、删除一行的方法

zigbee-cluster-library-specification

管理建模和仿真的文件

实现实时数据湖架构：Kafka与Hive集成

用matlab绘制高斯色噪声情况下的频率估计CRLB，其中w(n)是零均值高斯色噪声，w(n)=0.8*w(n-1)+e(n)，e(n)服从零均值方差为se的高斯分布

JSBSim Reference Manual

"互动学习：行动中的多样性与论文攻读经历"

实现实时监控告警系统：Kafka与Grafana整合