JavaScript使用表单元素验证表单的示例代码
JavaScript的主要作用:验证表单
1最简单的表单验证-禁止空白的必填项目
1.1最简单的HTML结构
网站最基础的就是注册,它是一个系统的交互基础.
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单列表的html结构</title>
</head>
<body>
<form method="post" action="">
账户:<input type="text" name=""/><br/><br/>
密码:<input type="password" name=""/><br/><br/>
确认:<input type="password" name=""/><br/><br/>
<input type="submit" value="注册" />
</form>
</body>
</html>
1.2绑定验证功能
因为用户最后要去点击"注册"按钮,所以我们就在"注册"按钮上添加一个onclick事件属性,引用eg.regCheck()
例子:
注册事件
<!DOCTYPE html>
<html>
<!--绑定验证功能，注册事件-->
<head>
<meta charset="utf-8">
<title>简单列表的html结构</title>
</head>
<body>
<form method="post" action="">
账户:<input type="text" name=""/><br/><br/>
密码:<input type="password" name=""/><br/><br/>
确认:<input type="password" name=""/><br/><br/>
<input type="submit"
value="注册"
onclick="return eg.regCheck();"/>
</form>
<script >
//声明一个对象,当做命名空间来使用
var eg = {};
eg.regCheck = function(){
}
</script>
</body>
</html>
eg.regCheck()函数需要添加的行为,获取用户输入的账户信息,给input标签加上一个id属性,JavaScript再通过这个指定的id去取得相应的信息,然后返回验证结果true或false
例子:
给表单添加验证功能
<!DOCTYPE html>
<html>
<!--给表单添加验证功能-->
<head>
<meta charset="utf-8">
<title>简单列表的html结构</title>
</head>
<body>
<form method="post" action="">
账户:<input type="text" name="" id="userid"/><br/><br/>
密码:<input type="password" name="" id="userpwd"/><br/><br/>
确认:<input type="password" name="" id="userpwd2"/><br/><br/>
<input type="submit"
value="注册"
onclick="return eg.regCheck();"/>
</form>
<script >
//声明一个对象,当做命名空间来使用
//定义一个公共函数来获取指定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;
};
</script>
</body>
</html>
1.3绑定验证的另一种方式
把验证放在"注册"按钮的onclick事件属性里使用,还有另一种调用方式,即form标签的onsubmit事件属性
例子:
form表单绑定验证完整范例
<!DOCTYPE html>
<html>
<!--
绑定验证的另一种方式,form表单绑定验证完整示例
-->
<head>
<meta charset="utf-8">
<title>简单列表的html结构</title>
</head>
<body>
<form method="post" action="" onsubmit="return eg.regCheck();">
账户:<input type="text" name="" id="userid"/><br/><br/>
密码:<input type="password" name="" id="userpwd"/><br/><br/>
确认:<input type="password" name="" id="userpwd2"/><br/><br/>
<input type="submit"
value="注册"
/>
</form>
<script>
//声明一个对象,当做命名空间来使用
//定义一个公共函数来获取指定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;
};
</script>
</body>
</html>
2,处理各种类型的表单元素
2.1，input,textarea,hidden和button
要求:在注册表单的基础上加"简介"字段，可以为空，但是最长不超过60个字符，同时要统计一下，用户输入错误的次数，输入超过3次，就锁定"注册"按钮,然后要"解锁"才能重新使用
例子:
处理各种类型表单一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>处理各种类型表单一</title>
</head>
<body>
<form method="post" action="" onsubmit="return eg.regCheck();">
账户:<input type="text" name="" id="userid"/><br/><br/>
密码:<input type="password" name="" id="userpwd"/><br/><br/>
确认:<input type="password" name="" id="userpwd2"/><br/><br/>
简介:
<textarea name="" rows="4" cols="18" id="about">
</textarea><br/><br/>
<input type="submit"
value="注册" id="regBtn"
/>
<input type="button" value="解锁" onclick="eg.unlock"
style="display: none;" id="regUnlock">
</form>
<script>
//声明一个对象,当做命名空间来使用
//定义一个公共函数来获取指定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属性下
}
</script>
</body>
</html>
现在制作一个错误统计,可以为后台系统保存起来用于分析用户的错误率，甚至可以分析出用户一般会在哪些字段上出错。记录错误信息不需要给用户看到，可以选择input的type属性是hidden的元素来存储
2.2checkbox,radio和select
知道用户性别,年龄,兴趣爱好
例子:
处理各种类型表单二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>处理各种类型表单二</title>
</head>
<body>
<form method="post" action="" onsubmit="return eg.regCheck();">
账户:<input type="text" name="" id="userid"/><br/><br/>
密码:<input type="password" name="" id="userpwd"/><br/><br/>
确认:<input type="password" name="" id="userpwd2"/><br/><br/>
简介:
<textarea name="" rows="4" cols="18" id="about">
</textarea><br/><br/>
<input type="submit"
value="注册" id="regBtn"
/>
<input type="button" value="解锁" onclick="eg.unlock"
style="display: none;" id="regUnlock">
</form>
<script>
//声明一个对象,当做命名空间来使用
//定义一个公共函数来获取指定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属性下
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍Vue from-validate 表单验证的示例代码，包括了Vue from-validate 表单验证的示例代码的使用技巧和注意事项，需要的朋友参考一下 前言 需要进行表单数据验证，原先才用html5来完成验证，但是效果很差，也不够灵活，所以需要进行自定义的表单验证，网上的插件都太过庞大，项目并没有这么多的需求。 那让我们自己来写一个吧！ 知识准备 vue的自定义指令 具体可以看
-
主要内容：使用 JavaScript 进行表单验证,必填字段验证,数据格式验证表单是 Web 应用（网站）的重要组成部分，通过表单可以收集用户提交的信息，例如姓名、邮箱、电话等。由于用户在填写这些信息时，有可能出现一些错误，例如输入手机号时漏掉了一位、在输入的内容前后输入空格、邮箱的格式不正确等。为了节省带宽同时避免这些问题对服务器造成不必要的压力，我们可以使用 JavaScript 在提交数据之前对数据进行检查，确认无误后再发送到服务器。 使用 JavaScript 来验
-
本文向大家介绍JQuery validate 验证一个单独的表单元素实例，包括了JQuery validate 验证一个单独的表单元素实例的使用技巧和注意事项，需要的朋友参考一下 前提：已引入JQuery validate插件 以上这篇JQuery validate 验证一个单独的表单元素实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍JavaScript表单验证完美代码，包括了JavaScript表单验证完美代码的使用技巧和注意事项，需要的朋友参考一下 用原生JS写一个简单的表单验证 首先，是html部分 接着，为其加上CSS样式 最后是JS部分 好了，打开浏览器测试一下吧 填写数据，可以！ 以上所述是小编给大家介绍的JavaScript表单验证完美代码，希望对大家有所帮助，如果大家有任何疑问请给我留言
-
本文向大家介绍js表单登陆验证示例，包括了js表单登陆验证示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js表单登陆验证的方法。分享给大家供大家参考，具体如下： 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中j
-
此页面包含了通过渐进增强驱动的表单元素。原生的表单元素有时被隐藏了，但他们的value值被保存了，所以表单可以正确的提交 不支持自定义组件的浏览器也能使用它们，因为所有表单组件都基于原生的html表单元素.