先看代码：

<!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. C++ 获取当前正在执行的函数的相关信息（转）

    该功能用在日志打印中 原文地址:C++ 获取当前正在执行的函数的相关信息

  2. 关于XXE

    NJUPT CTF2019: 做题的时候,抓包看了一下,响应XML格式消息,并没有严格过滤,这道题读文件, <!DOCTYPE foo [ <!ENTITY xxe SYSTEM &quo ...

  3. pymysql模块学习

    #Pymysql 用于连接mysql数据库 #连接数据库 data_ip = "192.168.34.128" data_name = "lch" data_p ...

  4. rest_framework:url控制

    一.基本路由(原始方式) 二.半自动路由(视图继承ModelViewSet) 三.自动路由(自动生成路由) 准备工作: models中创建一张表,默认使用sqlite数据库,更新表 新增测试数据 加载 ...

  5. Jmeter-Badboy检查点和参数化

    Badboy进行检查点操作 1.复制搜索的内容,点击Tools,选择添加断言Add Assertion for Selection 2.这个时候Step1步骤下就会多一个检查点 3.点击工具栏上的Pl ...

  6. 【Unity|C#】基础篇(10)——泛型（Generic）/ 泛型约束条件（where）

    [学习资料] <C#图解教程>(第17章):https://www.cnblogs.com/moonache/p/7687551.html 电子书下载:https://pan.baidu. ...

  7. Android Studio3.0.0之前首次安装通用配置

    一.第一次安装: 温馨提示:在安装Android Studio之前,建议先提前准备好单独的Android SDK,这个可以在AndroidDevTools网站下载.以前用Eclipse做过Androi ...

  8. JMeter概念

    1. Test Plan  测试计划 Test Plan也就是测试计划,概念有点类似eclipse里面的project(项目.工程). 一个JMeter测试计划有很多种测试元素组成.一般至少包含一个T ...

  9. SVN merge(合并) 时看不到以前的已经合并过的记录的标识

    今天遇到这么一个事情,merge的时候以前merge过的提交记录,咩有已合并过的标识了,就是下面这样的尾巴分叉向下的箭头 通常出现这样的情况,都是工程路径不对,检查了一下,没有问题,这些meng B ...

  10. 初探selenium3原理

    从一个启动浏览器并打开百度网页的代码开始 from selenium import webdriver driver = webdriver.chrome() driver.get('https:// ...