先看代码：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>demo</title>

	<style>

		input[type="submit"]{

			width: 120px;

			height: 40px;

			border: 0;

			background-color: antiquewhite;

		}

		input[type="submit"]:hover{

			background-color: beige;

		}

	</style>

</head>

<body>

	<form action="#" method="post">

		<label><input type="radio" required />高中</label>

		<label><input type="radio" required />大专</label>

		<label><input type="radio" required />本科</label>

		<label><input type="radio" required />硕士研究生</label>

		<label><input type="radio" required />博士及以上</label>

		<br />

		<input type="submit" value="提交" />

	</form>

</body>

</html>

提交数据时并没有进行非空验证。

正确代码为：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>demo</title>

	<style>

		input[type="submit"]{

			width: 120px;

			height: 40px;

			border: 0;

			background-color: antiquewhite;

		}

		input[type="submit"]:hover{

			background-color: beige;

		}

	</style>

</head>

<body>

	<form action="#" method="post">

		<label><input type="radio" name="q1" required />高中</label>

		<label><input type="radio" name="q1" required />大专</label>

		<label><input type="radio" name="q1" required />本科</label>

		<label><input type="radio" name="q1" required />硕士研究生</label>

		<label><input type="radio" name="q1" required />博士及以上</label>

		<br />

		<input type="submit" value="提交" />

	</form>

</body>

</html>

原因：

单项选择的实现是通过对多个单选按钮设置同样的name属性值和不同的选项值。例如，使用两个单选按钮，设置这两个控件的name值为sex，选项值一个为女，一个为男，从而实现从性别中选择一个的单选功能。

单选按钮有一个重要的属性checked，用来设置或返回单选按钮的状态。一组name值相同的单选按钮中，如果其中一个按钮的checked属性被设置为true，则其他按钮的checked属性值就默认为false。

单选按钮 设置required属性无法进行非空验证的更多相关文章

  1. JavaWeb 学习008-今日问题(非空验证尚未解决) 2016-12-2

    1. 学生模块list页面 不能正常跳转 说是找不到stuid属性,但是我在entity里面和数据库建表的属性就是stuid:Grade模块代码一样,却可以正常运行 这是什么问题? <c:for ...

  2. JS非空验证及邮箱验证

    非空验证 <body> <table> <tr> <td>姓名:</td> <td><input type="t ...

  3. Atitit  验证 数字验证 非空验证的最佳算法  h5

    Atitit  验证 数字验证 非空验证的最佳算法  h5 <td><select class="searchBox-select"   style=" ...

  4. JS-表单非空验证

    JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 实例:1.用户名的非空验证代码如下: <head> <m ...

  5. select标签非空验证，第一个option value=""即可

    select标签非空验证,第一个option value=""即可,否则不能验证

  6. 非空验证（源代码Java版）

    import java.util.Map; /** * 非空验证工具类 */ public class UntilEmpty { /** * @see: 验证string类型的是否为空 */ publ ...

  7. php非空验证

    我想说这种方法是不是很常用的非空验证,现在的普遍使用的是javascript来验证非空,但是作为学习php的一些知识点,还是可以看看的. 先来看看commit.php中的方法 <?php $db ...

  8. .NET开源工作流RoadFlow-Bug修改-1.8.2表单验证时ueditor编辑非空验证无效

    RoadFlow生成的表单,Ueditor编辑器不能进行非空验证的BUG修改: 1.修改控制器:WorkFlowFormDesignerController红框处: 2.修改js文件:Scripts/ ...

  9. iview 表单非空验证

    rules: { title: [ {required: true, message: '请填写栏目名称', trigger: 'blur'} ], desc: [ {required: true, ...

随机推荐

  1. liunx下安装Docker

    1.安装并启动docker 1.检查内核版本,必须是3.10及以上uname -r2.安装docker yum install docker命令安装(需要联网) [root@localhost ~]# ...

  2. 一个vue的日历组件

    说明: 1.基于element-ui开发的vue日历组件. 地址 更新: 1.增加value-format指定返回值的格式2.增加头部插槽自定义头部 <ele-calendar > < ...

  3. 松软科技课堂:jQuery 事件函数

    jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数. 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法.术语由事件“触发”(或“激发”)经常会被使用. 通常会 ...

  4. 全排列（dfs-有重复数字）

    给出一个字符串S(可能有重复的字符),按照字典序从小到大,输出S包括的字符组成的所有排列.例如:S = "1312", 输出为:   1123 1132 1213 1231 131 ...

  5. VS Code的一些常用插件

    1.Bracket Pair Colorizer(括号对彩色化)功能:vscode中括号提醒比较简答,对于层级比较多的比较难看出他的结构,它为代码中的各种结对的括号提供了颜色高亮等功能,将括号对用线连 ...

  6. linq和转换运算符

    1.ToArray 两种常用用法 使用ILSPY查看Enumerable中的ToArray 源码分析:我们发现如果该类型可以转化为ICollection,我们最后执行CopyTo方法,如果不能转换为I ...

  7. PP: Time series clustering via community detection in Networks

    Improvement can be done in fulture:1. the algorithm of constructing network from distance matrix. 2. ...

  8. Web设计精髓（转）

    作者:zhouwenqi  地址:http://www.zhouwenqi.com/blog/board_43.html 这篇文章说实际问题的,所以不多强调,下面是我总结的一些比较突出的细节问题,而且 ...

  9. GIT如何根据历史记录回退代码

    ps: 因为使用这种方式回退后,回退的目标版本之后提交的代码都没了,所以建议先把当前代码打个tag 首先找到分支的提交记录 git log 将代码回退到历史版本 git reset --hard 0f ...

  10. AcWing 792. 高精度减法

    https://www.acwing.com/problem/content/794/ #include<bits/stdc++.h> using namespace std; //判断是 ...