在网页提交表单的呃时候，往往需要进行表单的必填项进行验证，下面我们以两个例子来写一下对表单的必填项进行
认证的两个例子，第二个例子是对第一个例子进行的改进。
首先是最基本的最简单的表单必填项的实例代码
<!DOCTYPE html>
<html>
<head>
<title>确认表单必填项完整性</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function $(str){
return (document.getElementById(str));
}
function check_submit(){
if($("username").value ==""){
alert("请填写用户名!");
return false;
}
if($("password").value == ""){
alert("请填写密码!");
return false;
}
}
</script>
</head>
<body>
<form action="" onsubmit="return check_submit();">
用户名:<input id="username" type="text"><br/>
密 码:<input id="password" type="password"><br/>
<input type="submit" value="提交">
</form>
</body>
</html>
下面是对表单的验证进行了改进
<!DOCTYPE html>
<html>
<head>
<title>更加人性化表单</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function $(str){
return (document.getElementById(str));
}
function check_submit(){
if($("username").value =="" || $("username").value=="请输入用户名"){
alert("用户名不能为空!");
return false;
}
if($("password").value ==""){
alert("密码不能为空！");
return false;
}
}
function mover(){
event.srcElement.focus();
event.srcElement.select();
}
function mclick(){
if(event.srcElement.value=="请输入用户名")
event.srcElement.value="";
}
function mblur(){
if(event.srcElement.value=="")
event.srcElement.value="请输入用户名";
}
</script>
</head>
<body>
<form action="" onsubmit="return check_submit();">
用户名:<input id="username" type="text" onmouseover="mover();" onclick="mclick();"
onblur="mblur();" value="请输入用户名"><br/>
密 码:<input id="password" type="password" onmouseover="mover();"><br/>
<input type="submit" value="提交" id="submit">
</form>
</body>
</html>
当表单的用户名输入框鼠标划过的时候，触发事件，然后自动选中事件，当失去焦点的时候，检测里面的值是否为
空，如果为空就返回原来的值。应该说是比较大的改进。
分享到：
相关推荐
比较实用的javascript做的表单验证，验证的表单域包括用户名、密码、密码确认、密码提示问题、邮箱、手机号码、身份证。表单域基本通过获得焦点显示...提交表单先进行必填项不能为空验证，再进行正则表达式匹配验证。
CSS注册表单必填验证代码.zip
希望实现查询表单的某些属性可以循环验证必填项： 需求： 1.名称，对比项，备注必填，默认为一行，可增加多行 2.根据名称，动态请求对比项列表，名称变化时，清空该行当前选择的对比项 思路：将整个搜索分成了...
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 被 JavaScript 验证的这些...
本项目包括详细的表单验证，字段包括姓名，身份证，日期等等很多的验证。有正则，欢迎大家欣赏
JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 ...用户是否已填写表单中的必填项目？ 用户输入的邮件地址是否合法？ 用户是否已输入合法的日期？ 用户是否在数据域 (numeric field) 中输入了文本？
240行的微信小程序表单验证工具，可以快速实现必填校验、正则校验、自定义校验和异步校验。 体验Demo 简介 一个用于微信小程序的表单验证工具，用于快速表单校验，特点在于通过统一的form对象实现表单值规范管理，...
DEDE自定义表单加验证码功能+js必填项
被 JavaScript 验证的这些典型的表单数据有： 用户是否已填写表单中的必填项目？用户输入的邮件地址是否合法？用户是否已输入合法的日期？用户是否在数据域 (numeric field) 中输入了文本？必填（或必选）项目 下面...
表单数据经常需要使用 JavaScript 来验证其正确性： 验证表单数据是否为空？ 验证输入是否是一个正确的email地址？ 验证日期是否输入正确？ 验证表单输入内容是否为数字型？ 必填（或必选）项目 下面的函数用来...
vue 使用rules对表单字段进行校验的步骤 在实际开发过程中，发现以下的写法比较累赘，因为在后面的项目中，继续优化表单验证的方法，让代码更简洁。主要的修改是验证方法的修改和调用 以前验证表单字段的最大长度...
学号：必填、不可更改、不可重复（使用Ajax异步进行数据库的连接验证学号是否重复） 密码：长度限制 手机号：格式限制（可能需要发送验证码？） 邮箱：格式限制（可能需要发送验证码？） 最后可能需要验证码？ 注册...
1最简单的表单验证-禁止空白的必填项目 1.1最简单的HTML结构 网站最基础的就是注册,它是一个系统的交互基础. 例子: <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>...
只需对验证元素简单配置一下即可，使用方便，也不会影响页面的布局，并可以精确判断客户端输入框的长度、必填、数据类型(整数型、浮点型、字母型、数字字母混合型)和下拉框等，及对需要验证的控件分组验证等。...
JavaScript 可用来在数据被...被 JavaScript 验证的这些典型的表单数据有：用户是否已填写表单中的必填项目？用户输入的邮件地址是否合法？用户是否已输入合法的日期？用户是否在数据域 (numeric field) 中输入了文本？
1.用户是否已填写表单中的必填项目？ 2.用户输入的邮件地址是否合法？ 3.用户是否已输入合法的日期？ 4.用户是否在数据域 (numeric field) 中输入了文本？ 下面是用户名和密码验证代码： <!doctype html> <...
表单验证控件 支持文本框,密码框,下拉框,单选框,多选框,文本域以及对象等等的验证,包括必填,对比,正则等等验证 使用方法: 进行验证: $("#form").TsForm(); 清空表单: $("#form").TsFormReset(); 属性: minlength:...
在JavaScript问世之前，必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域，是否输入了无效的值。Netscape Navigator希望通过JavaScript来解决这个问题。在人们普遍使用电话拔号上网的年代，能够在...
使用方法：在要验证的表单中加上 onsubmit=”return validator(this)” 在要验证的表单元件中设置，valid(验证规则),errmsg（提示消息），多个验证使用|全为分隔！ 验证规则参数： 代码如下:required 必填 ...