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=""
}