form表ge实例 html_HTML 表单的验证

https://xungejiang.com/https://xungejiang.com/https://xungejiang.com/https://xungejiang.com/https://xungejiang.com/https://xungejiang.com/

表单的验证在实际生活中很常见，比如注册页面要求用户名长度6-12位，如果不在这个范围内会报错的。

表单的验证一般使用 JavaScript 实现，博主在这里简单介绍一下。

表单的创建

表单经常是由输入框组成。这里介绍几个常用的输入框。 文本框

密码框

提交按扭

复选框

单选框

重置按扭

图片按扭

隐藏域

按扭

浏览文件

执行后的效果大概如此

这里以注册用户名为例，要求 **6-30位字母、数字或“_”,字母开头**用户名： 6-30位字母、数字或“_”,字母开头

将改代码片段放入

标签下，最后执行结果如图所示：

onblur 介绍

这里需要用到一个 event 对象 onblur ，定义为 onblur 事件会在对象失去焦点时发生，及当我光标离开输入框时触发事件发生，这非常适用于检查输入框内容的格式是否符合要求。当然还有很多 events ，若想了解更多可到 w3school 查询。

span 介绍

标签被用来组合文档中的行内元素。这里主要用来显示错误信息。

JavaScript 实现function ()

{

var u = document.getElementById("username");

var info1 = document.getElementById("info1");

var yes = document.getElementById("yes");

if (u.value == "")

{

info1.innerHTML = "✘请输入用户名！";

return false;

}

if(u.value.length < 6)

{

info1.innerHTML = "✘用户名长度不能少于6个字符！";

return false;

}

var r = /^[a-zA-Z][a-zA-Z0-9_]{5,29}$/;

if (!r.test(u.value))

{

info1.innerHTML = "✘用户名只能由字母，数字，下划线组成，须以字母开头";

return false;

}

yes.innerHTML = "✔";

info1.innerHTML = "";

}

由代码可以很容易理解 JavaScript 语法需要先用 document.getElementById("") 获取输入框，然后用 .value 得到输入框的内容。

错误分三种情况：

1.如果输入为空，则错误信息为“请输入用户名！” 2.如果输入少于6个字符，则错误信息为“用户名长度不能少于6个字符！” 3.如果输入不满足由 由字母，数字，下划线组成，须以字母开头 这个条件，则错误信息为 用户名只能由字母，数字，下划线组成，须以字母开头

三种错误方式分别如图所示

正确方式如图所示

其中最后的条件限制使用了正则表达式。

placeholder 介绍

placeholder 是 html5 里的属性，提供可描述输入字段预期值的提示信息(hint)。

为了

无标题文档

用户名:	6-30位字母、数字或“_”,字母开头
登陆密码:
确认密码:
姓名:
证件类型:	二代身份证 港澳通行证 台湾通行证 护照
证件号码:
手机号码:
旅客类型:	成人 儿童 学生 残疾军人、伤残人民警察

function ()

{

var u = document.getElementById("username");

var info1 = document.getElementById("info1");

var yes = document.getElementById("yes");

if (u.value == "")

{

info1.innerHTML = "请输入用户名！";

return false;

}

if(u.value.length < 6)

{

info1.innerHTML = "用户名长度不能少于6个字符！";

return false;

}

var firstChar = u.value.charAt(0);

/*if (!((firstChar >= 'a' && firstChar <= 'z') || (firstChar >= 'A' && firstChar <= 'Z')))

{

info.innerHTML = "✘用户名必须以字母开头！";

return false;

}*/

// 定义一个正则表达式，校验用户名的规则

var r = /^[a-zA-Z][a-zA-Z0-9_]{5,29}$/;

if (!r.test(u.value))

{

info1.innerHTML="用户名只能由字母，数字，下划线组成，须以字母开头";

return false;

}

yes.innerHTML="✔";

info1.innerHTML="";

}

/***************************checkPassword*************************/

var pass = "";

function checkPassword()

{

var p = document.getElementById("password");

var info2 = document.getElementById("info2");

pass = p.value;

if (p.value == "")

{

info2.innerHTML = "请输入密码！";

return false;

}

if(p.value.length < 6)

{

info2.innerHTML = "密码长度不能少于6个字符！";

return false;

}

var firstChar = p.value.charAt(0);

// 定义一个正则表达式，校验用户名的规则

var r = /^[a-zA-Z][a-zA-Z0-9_]{5,29}$/;

if (!r.test(p.value))

{

info2.innerHTML="只能由字母，数字，下划线组成，须以字母开头";

return false;

}

yes1.innerHTML="✔";

info2.innerHTML="";

}

/*********************checkPasswordtwice*******************************/

function checkPasswordtwice()

{

var p1 = document.getElementById("passwordconfirm");

var info3 = document.getElementById("info3");

if (p1.value!=pass)

{

info3.innerHTML = "确认密码与密码不同！";

return false;

}

yes2.innerHTML="✔";

info3.innerHTML=""

}

/*****************************checkID*********************************/

function checkID()

{

var p2 = document.getElementById("IDNO");

var info4 = document.getElementById("info4");

//var r = /^[0-9][a-zA-Z0-9]{18}$/;

var r1 = /[0-9]{18}$/;

if (!r1.test(p2.value))

{

info4.innerHTML="请正确输入18位的身份证号";

return false;

}

yes3.innerHTML="✔";

info4.innerHTML=""

}