<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function validate() {
if(loginform.username.value == ""){
alert("账号不能为空!");
return;
}
if(loginform.password.value == ""){
alert("密码不能为空!");
return;
}
loginform.submit();
}
</script>
</head>
<body>
<form action="test" method="post" name="loginform">
用户名:<input type="text" name="username"><br> 密码: <input type="password" name="password"><br> 性别:<input type="radio" name="sex" value="boy" checked="true">男
<input type="radio" name="sex" value="girl">女<br> 家乡:<select name="home">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangdong">广东</option>
</select><br> 隐藏域:<input type="hidden" name="page"><br> 个人信息:<textarea name="info" cols="30" rows="10"></textarea><br> 爱好:<input type="checkbox" name="fav" value="sing">唱歌
<input type="checkbox" name="fav" value="dance">跳舞
<input type="checkbox" name="fav" value="ball">打球
<input type="checkbox" name="fav" value="game">打游戏<br> <select name="hobby" multiple="true">
<option value="sing">唱歌</option>
<option value="dance">跳舞</option>
<option value="ball">打球</option>
<option value="game">打游戏</option>
</select><br> 号码1:<input type="text" name="phone"><br>
号码2:<input type="text" name="phone"><br>
号码3:<input type="text" name="phone"><br>
号码4:<input type="text" name="phone"><br>
号码5:<input type="text" name="phone"><br> <input type="submit" value="查询"> <input type="button" value="验证查询" onclick="validate()">
</form>
</body>
</html>

效果图例如以下:

html 前台通用表单的更多相关文章

  1. JS通用表单验证函数,基于javascript正则表达式

    表单的验证在实际的开发当中是件很烦琐又无趣的事情今天在做一个小项目的时候,需要JS验证,寻找到一个比较好的东西 地址如下: http://blog.csdn.net/goodfunman/archiv ...

  2. JFinal极速开发实战-业务功能开发-通用表单验证器

    提交表单数据时,需要经过前端的验证才能提交到后台,而后台的验证器再做一道数据的校验,成功之后才能进入action进行业务数据的处理. 在表单数据的验证中,数据类型的验证还是比较固定的.首先是对录入数据 ...

  3. 移动端H5通用表单验证插件

    将表单验证的通用部分提炼出来,做成一个简易插件,方便调用. 已将源码放到GitHub上,名字叫zValidate. 手机可扫描下图查看示例,PC端可点击此处查看: 一.原理 1)需要引入zepto.j ...

  4. element-ui 通用表单封装及VUE JSX应用

    一.存在及需要解决的问题 一般在做后台OA的时候会发现表单重复代码比较多,且逻辑基本一样,每次新加一个表单都需要拷贝基本一致的代码结构,然后只是简单地修改对应的字段进行开发 二.预期结果 提取重复的表 ...

  5. jQuery 通用表单方法

    表单验证一直是一个麻烦的事情,让很多人望而退步,之前想过一个验证的好方法,但是有bug,昨晚请教了juyling.com的王员外,顺利解决. 以下是js代码     function mySubmit ...

  6. YII用户注冊表单的实现熟悉前台各个表单元素操作方式

    模还是必须定义两个基本方法.还有部分label标签映射为汉字,假设进行表单验证,还要定义一些验证规则: <? php /* * 用户模型 * */ class user extends CAct ...

  7. weiphp 插件"通用表单"BUG修改

    修改文件目录 在类FormsValueController 中添加函数 // 匹配函数 //$value:字符串 //$validate_rule:正则规则 // return true:比配成功,f ...

  8. JS自定义表单提交处理方案

    JS自定义数据提交处理方案 问题 在Ajax技术流行的今天,我遇到了一个很头疼的问题,我需要维护一个前人开发的问题单模块功能,并且不停的迭代开发,而这个问题就是问题单字段特别多,而且除了更新问题单外, ...

  9. Validform表单验证总结

    近期项目里用到了表单的验证,选择了Validform_v5.3.2. 先来了解一下一些基本的参数: 通用表单验证方法:Demo: $(".demoform").Validform( ...

随机推荐

  1. directdraw的多画面显示rgb

    // showpicDlg.cpp : 实现文件 // #include "stdafx.h" #include "showpic.h" #include &q ...

  2. Java中的的XML文件读写与DOM

    XML简介 要理解XML,HTML等格式,先来理解文档对象模型DOM 根据 DOM,HTML 文档中的每个成分都是一个节点,这些节点组成了一棵树.DOM 是这样规定的:整个文档是一个文档节点每个 HT ...

  3. DevExpress z

    1.TextEditor(barEditItem)取文本 string editValue = barEditItem1.EditValue.ToString();    //错误,返回null st ...

  4. POJ 3321- Apple Tree(标号+BIT)

    题意: 给你一棵树,初始各节点有一个苹果,给出两种操作,C x 表示若x节点有苹果拿掉,无苹果就长一个. Q x查询以x为根的子树中有多少个苹果. 分析: 开始这个题无从下手,祖先由孩子的标号不能确定 ...

  5. <转>如何测试大型ERP软件?

    大型ERP软件是一个在企业范围内部应用的.高度集成的软件,且操作频繁,数据在各业务系统之间高度共享.那么针对大型ERP软件的特点,我们应该怎么测试呢?要使用怎样的测试方法?需要什么样的测试人员?... ...

  6. 《Python基础教程(第二版)》学习笔记 -> 第七章 更加抽象

    对象的魔力 多态:意味着可以对不同类的对象使用同样的操作: 封装:对外部世界隐藏对象的工作细节: 继承:以普通的类为基础建立专门的类对象 多态① 多态和方法绑定到对象特性上面的函数称为方法(metho ...

  7. MVC3.0在各个版本IIS中的部署

    概述: 最近在做一个MVC 3的项目,在部署服务器时破费了一番功夫,特将过程整理下来,希望可以帮到大家! 本文主要介绍在IIS5.1.IIS6.0.IIS7.5中安装配置MVC 3的具体办法! 正文: ...

  8. ZOJ3772 - Calculate the Function(线段树+矩阵)

    题目大意 给定一个序列A1 A2 .. AN 和M个查询 每个查询含有两个数 Li 和Ri. 查询定义了一个函数 Fi(x) 在区间 [Li, Ri] ∈ Z. Fi(Li) = ALi Fi(Li ...

  9. ES6学习(1)——如何通过babel将ES6转化成ES5

    使用babel编译ES6 babel是一个工具,可以通过多个平台,让js文件从ES6转化成ES5,从而支持一些浏览器并未支持的语法. Insall babel $ sudo npm install b ...

  10. 通过request读取所有参数

    获取request里的所有参数及参数名(参数名自动获取)  -  [ Java ] request里有两个方法: 1)request.getParameterMap(); Enumeration en ...