html 表单js验证,JavaScript使用表单元素验证表单

第一章:使用JavaScript验证表单

JavaScript的主要作用:验证表单

1最简单的表单验证-禁止空白的必填项目

1.1最简单的HTML结构

网站最基础的就是注册,它是一个系统的交互基础.

例子:

简单列表的html结构

账户:

密码:

确认:

1.2绑定验证功能

因为用户最后要去点击"注册"按钮,所以我们就在"注册"按钮上添加一个onclick事件属性,引用eg.regCheck()

例子:

​ 注册事件

简单列表的html结构

账户:

密码:

确认:

value="注册"

οnclick="return eg.regCheck();"/>

//声明一个对象,当做命名空间来使用

var eg = {};

eg.regCheck = function(){

}

eg.regCheck()函数需要添加的行为,获取用户输入的账户信息,给input标签加上一个id属性,JavaScript再通过这个指定的id去取得相应的信息,然后返回验证结果true或false

例子:

​ 给表单添加验证功能

简单列表的html结构

账户:

密码:

确认:

value="注册"

οnclick="return eg.regCheck();"/>

//声明一个对象,当做命名空间来使用

//定义一个公共函数来获取指定id元素,减少代码量,提高代码复用率

var eg = {};

eg.$ = function(id){

return document.getElementById(id);

};

eg.regCheck = function(){

var uid = eg.$("userid");

var upwd = eg.$("userpwd");

var upwd2 = eg.$("userpwd2");

if(uid.value == ''){

alert('账户不能为空!');

//返回false就会阻止表单form提交

return false;

}

if(upwd.value == ''){

alert('密码不能为空!');

//返回false就会阻止表单form提交

return false;

}

if(upwd.value != upwd2.value){

alert('两次输入密码不相同!');

//返回false就会阻止表单form提交

return false;

}

return true;

};

1.3绑定验证的另一种方式

​ 把验证放在"注册"按钮的onclick事件属性里使用,还有另一种调用方式,即form标签的onsubmit事件属性

例子:

​ form表单绑定验证完整范例

简单列表的html结构

账户:

密码:

确认:

value="注册"

/>

//声明一个对象,当做命名空间来使用

//定义一个公共函数来获取指定id元素,减少代码量,提高代码复用率

var eg = {};

eg.$ = function(id){

return document.getElementById(id);

};

eg.regCheck = function () {

var uid = eg.$("userid");

var upwd = eg.$("userpwd");

var upwd2 = eg.$("userpwd2");

if(uid.value == ''){

alert('账户不能为空!');

//返回false就会阻止表单form提交

return false;

}

if(upwd.value == ''){

alert('密码不能为空!');

//返回false就会阻止表单form提交

return false;

}

if(upwd.value != upwd2.value){

alert('两次输入密码不相同!');

//返回false就会阻止表单form提交

return false;

}

return true;

};

2,处理各种类型的表单元素

2.1，input,textarea,hidden和button

​ 要求:在注册表单的基础上加"简介"字段，可以为空，但是最长不超过60个字符，同时要统计一下，用户输入错误的次数，输入超过3次，就锁定"注册"按钮,然后要"解锁"才能重新使用

例子:

​ 处理各种类型表单一

处理各种类型表单一

账户:

密码:

确认:

简介:

value="注册" id="regBtn"

/>

style="display: none;" id="regUnlock">

//声明一个对象,当做命名空间来使用

//定义一个公共函数来获取指定id元素,减少代码量,提高代码复用率

var eg = {};

eg.$ = function(id){

return document.getElementById(id);

};

//主要的验证方法

eg.regCheck = function () {

var uid = eg.$("userid");

var upwd = eg.$("userpwd");

var upwd2 = eg.$("userpwd2");

//value是元素自带属性

if(uid.value == ''){

alert('账户不能为空!');

eg.err();

return false;

}

if(upwd.value == ''){

alert('密码不能为空!');

eg.err();

return false;

}

if(upwd.value != upwd2.value){

alert('两次输入密码不相同!');

eg.err();

return false;

}

//新增部分

var about = eg.$("about");

//value是字符串类型的属性

if (about.value.length>60){

alert("简介太长!");

eg.err();

return false;

}

//返回true就会提交表单

return true;

};

//出错时记录错误次数

eg.err = function () {

var el = eg.$("errnum");

var old = el.value;

//把字符串转换为整数+1,并保存起来

el.value = parseInt(old)+1;

//用来检查是否应该锁定

eg.lock();

};

//通过次数判断是否要锁定

eg.lock = function(){

var err = eg.$("errnum");

if (parseInt(err.value)>2){

eg.$("regBtn").disabled = true;

//根据业务需求,输错3次就锁定

eg.$("regUnlock").style.display="block";

//同时显示解锁按钮

}

};

eg.unlock = function(){

eg.$("regBtn").disabled = false;

//根据业务需求，解锁就是让用户可以重新注册

eg.$("regUnlock").style.display="none";

//元素所有样式都挂载到style属性下

}

现在制作一个错误统计,可以为后台系统保存起来用于分析用户的错误率，甚至可以分析出用户一般会在哪些字段上出错。记录错误信息不需要给用户看到，可以选择input的type属性是hidden的元素来存储

2.2checkbox,radio和select

知道用户性别,年龄,兴趣爱好

例子:

​ 处理各种类型表单二

处理各种类型表单二

账户:

密码:

确认:

简介:

value="注册" id="regBtn"

/>

style="display: none;" id="regUnlock">

//声明一个对象,当做命名空间来使用

//定义一个公共函数来获取指定id元素,减少代码量,提高代码复用率

var eg = {};

eg.$ = function(id){

return document.getElementById(id);

};

//主要的验证方法

eg.regCheck = function () {

var uid = eg.$("userid");

var upwd = eg.$("userpwd");

var upwd2 = eg.$("userpwd2");

//value是元素自带属性

if(uid.value == ''){

alert('账户不能为空!');

eg.err();

return false;

}

if(upwd.value == ''){

alert('密码不能为空!');

eg.err();

return false;

}

if(upwd.value != upwd2.value){

alert('两次输入密码不相同!');

eg.err();

return false;

}

//新增部分

var about = eg.$("about");

//value是字符串类型的属性

if (about.value.length>60){

alert("简介太长!");

eg.err();

return false;

}

//返回true就会提交表单

return true;

};

//出错时记录错误次数

eg.err = function () {

var el = eg.$("errnum");

var old = el.value;

//把字符串转换为整数+1,并保存起来

el.value = parseInt(old)+1;

//用来检查是否应该锁定

eg.lock();

};

//通过次数判断是否要锁定

eg.lock = function(){

var err = eg.$("errnum");

if (parseInt(err.value)>2){

eg.$("regBtn").disabled = true;

//根据业务需求,输错3次就锁定

eg.$("regUnlock").style.display="block";

//同时显示解锁按钮

}

};

eg.unlock = function(){

eg.$("regBtn").disabled = false;

//根据业务需求，解锁就是让用户可以重新注册

eg.$("regUnlock").style.display="none";

//元素所有样式都挂载到style属性下

}