HTML5表单必填项属性required="required"

本文介绍了HTML5中新增的表单验证属性required,通过实例展示了如何应用此属性确保表单输入项必填,简化前端验证流程。

前端人员肯定做过不少表单验证的项目,其中很重要的一点就是有些输入框的内容是必须填写的,这里就需要使用Javascript来检查。在HTML5中,新增了一个“必须填写”的属性:required。required属性有两种使用方法,第二种方法显得更有结构性,而第一种更简洁。

1<</CODE>input type="text" name="someInput" required>
2<</CODE>input type="text" name="someInput" required="required">


有了这个属性,使表单的提交验证变得更简单了,看看下面简单的例子:

1<</CODE>FORM method=post>
2    <</CODE>LABEL for=someInput> Your Name: </</CODE>LABEL>
3<</CODE>INPUT id=someInput type=text name=someInput placeholder="Douglas
4Quaid" required="required">
5    <</CODE>BUTTON type=submit>Go</</CODE>BUTTON>
6</</CODE>FORM>

如果输入框为空,表单将无法提交成功。

转载于:https://www.cnblogs.com/yy-5616/p/5062542.html

<?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:cc="http://java.sun.com/jsf/composite" xmlns:lkmcc="http://java.sun.com/jsf/composite/lkmComponent" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" xmlns:c="http://java.sun.com/jsp/jstl/core"> <cc:interface/> <cc:implementation> <style> .ui-panel .ui-panel-content { border: none !important; padding: 0.571em 0em !important; } .no-border { border: none !important; } .no-border td{ vertical-align: top; } .no-border .ui-panelgrid-cell { border: none !important; padding: 5px !important; } </style> <p:outputPanel> <h:panelGrid columns="2" styleClass="no-border"> <p:outputPanel style = "display: flex;flex-wrap: wrap;"> <h:panelGrid columns="1" styleClass="no-border"> <h:panelGrid columns="3" responsive="true" styleClass="no-border"> <p:outputLabel value="编号:" /> <p:inputText id="create_studentNo" style="width:250px" value="#{studentBean.createBoardDm.studentNo}" readonly="#{not empty studentBean.createBoardDm.studentNo}" required="true" requiredMessage="请输入编号" /> <p:message for="create_studentNo" style="color:red;" /> <p:outputLabel value="姓名:" /> <p:inputText id="create_name" style="width:250px" value="#{studentBean.createBoardDm.name}" required="true" requiredMessage="请输入姓名" /> <p:message for="create_name" style="color:red;" /> <p:outputLabel value="年龄:" /> <p:inputText id="create_age" style="width:250px" value="#{studentBean.createBoardDm.age}" required="true" requiredMessage="请输入年龄" type="number" min="0" max="150" step="1" /> <p:message for="create_age" style="color:red;" /> </h:panelGrid> <h:panelGrid columns="2" responsive="true" styleClass="no-border"> <p:outputLabel value="家庭地址:" /> <p:inputTextarea id="create_homeAddress" value="#{studentBean.createBoardDm.homeAddress}" rows="6" cols="50" /> <p:outputLabel value="入学日期:" /> <p:calendar id="create_enrollmentDate" value="#{studentBean.createBoardDm.enrollmentDate}" pattern="yyyy-MM-dd" inputStyle="width:150px"></p:calendar> <p:outputLabel value="有效状态:" /> <p:selectOneMenu id="create_validStatus" value="#{studentBean.createBoardDm.validStatus}" style="width:150px"> <f:selectItem itemLabel="有效" itemValue="Y" /> <f:selectItem itemLabel="无效" itemValue="N" /> </p:selectOneMenu> </h:panelGrid> </h:panelGrid> </p:outputPanel> </h:panelGrid> <h:panelGrid columns="2" responsive="true" styleClass="no-border"> <p:commandButton value="提交" actionListener="#{studentBean.createStudent}" update="@form:tabView:studentList:board_page" class="query" ajax="true" style="width:80px;" oncomplete="if (!args || !args.validationFailed) { PF('createStudent').hide(); }" /> <p:commandButton value="关闭" style="width:80px;" onclick="PF('createStudent').hide(); return false;" /> </h:panelGrid> </p:outputPanel> </cc:implementation> </html> 如何提交的时候才验证必填
07-15
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值