js和jquery分别验证单选框、复选框、下拉框

转载 2016年08月30日 13:51:07

分别讲一下js和jQuery验证单选框(radio)、多选框(checkbox)、下拉框(select)

(1).首先说单选框(radio),radio和checkbox一样都是name相同值有多个在获取 radio 值的时候我们不能按照普通文本框.value的方式,而是要判断哪个被选中了。js验证是要用getElementsByName()获取数组

js代码如下:


  1. <script>
  2. function test(){
  3. var sex = document.getElementsByName("sex");
  4. var flag = 0;
  5. for (var i=0;i<sex.length;i++)
  6. {
  7. if (sex.item(i).checked == true)
  8. {
  9. flag = 1;
  10. break;
  11. }
  12. }
  13. if (!flag)
  14. {
  15. alert("请选择性别");
  16. }
  17. }
  18. </script>
  19. <input type="radio" name="sex" value="m"><input type="radio" name="sex" value="f">
  20. <input type="button" id="btn" value="提交" onclick="test()">

jQuery验证就简单多了,做到了少写多做,呵呵:

 


  1. <script src="jquery-1.7.1.min.js"></script>
  2. <script>
  3. $(document).ready(function(){
  4. $("#btn").click(function(){
  5. if ($(":radio:checked").length == 0)
  6. {
  7. alert("你的性别未选择");
  8. }
  9. });
  10. });
  11. </script>
  12. <input type="radio" name="sex" value="m"><input type="radio" name="sex" value="f">
  13. <input type="button" id="btn" value="提交">

 

  (2)复选框(checkbox),这个真不用讲了,因为复选框和单选框的做法完全相同,只要把上面脚本中radio改成checkbox就ok啦!

 

  (3)下拉框(select)

  使用js验证:

    js代码:


  1. <script>
  2. function test(){
  3. var sex = document.getElementById("sex").value;
  4. if (!sex)
  5. {
  6. alert("你的性别未选择");
  7. }
  8. }
  9. </script>
  10. <select id="sex">
  11. <option value="">--请选择性别--</option>
  12. <option value="m"></option>
  13. <option value="f"></option>
  14. </select>
  15. <input type="button" id="btn" value="提交" onclick="test()">

  使用jQuery验证:


  1. <script src="jquery-1.7.1.min.js"></script>
  2. <script>
  3. $(document).ready(function(){
  4. $("#btn").click(function(){
  5. if ($("#sex").val() == '')
  6. {
  7. alert("你的性别未选择");
  8. }
  9. });
  10. });
  11. </script>
  12. <select id="sex">
  13. <option value="">--请选择性别--</option>
  14. <option value="m"></option>
  15. <option value="f"></option>
  16. </select>
  17. <input type="button" id="btn" value="提交">

相关文章推荐

用JS判断单选按钮是否选中

function check(){ var flag = false; if(form1.info_type != null){ var msglen=form1.info_type.l...

Android设计模式学习之观察者模式

观察者模式在实际项目中使用的也是非常频繁的,它最常用的地方是GUI系统、订阅——发布系统等。因为这个模式的一个重要作用就是解耦,使得它们之间的依赖性更小,甚至做到毫无依赖。以GUI系统来说,应用的UI...

关注CSDN程序人生公众号,轻松获得下载积分

关注公众号 在公众号里回复“”秘密“”两个字 返回 http://task.csdn.net/m/task/home?task_id=398 领取奖励 提示:根据公众号里的自动回复,完成...

属性动画----把图片渐渐变小不见(主函数MainActivity 页面)(XML布局)(本布局和渐变布局一样)

LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schema...

JavaEE 6及以上版本的web.xml问题?

JavaEE 6及以上版本的web.xml问题?MyEclipse JavaEE 6版本开始web.xml突然消失不见?没这回事,只是不太必须而已,有需要的项目可以自行进行添加或在创建项目的时候点击n...

spring集成 JedisCluster 连接 redis3.0 集群

maven依赖: redis.clients jedis 2.8.0 2. 增加spring 配置 ...

Android 图片毛玻璃的实现方法

注:本文的高斯模糊只能显示,如果想要保存模糊后的图片,请参考另一篇文章:http://blog.csdn.net/fan7983377/article/details/51568059 效果...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)