js验证表单

注意：

只做非空验证, 只是个小demo

学习思想，onblur onfocus onsubmit的使用，给出友好提示

网上有很多有良好，强大的控件，用于用户输入

代码实现

js代码

     <script>function check_form(form) {// 得到form表单的所有input标签var els = form.getElementsByTagName("input");for(var i = 0; i < els.length; i ++) {// alert(typeof(els[i].getAttribute("onblur")));// 有onblur失焦事件的input框if (typeof(els[i].getAttribute("onblur")) == "function" || typeof(els[i].getAttribute("onblur")) == "string") {if (!check_item(els[i])) {return false;}}}return true;}function check_item(obj) {// input标签的值var value = obj.value.trim();// 根据层级关系取到label标签var msgBox = obj.parentNode.getElementsByTagName("label")[0];// 选择标签名，如果是空，给出提示switch (obj.name){ case "name":                  if (value == "") {msgBox.className = "change_color";msgBox.innerText = "填写姓名";return false;}case "age":if (value == "") {msgBox.className = "change_color";msgBox.innerText = "填写年龄";                         return false;}/*case "gender": break;*/case "birthday":if (value == "") {msgBox.className = "change_color";msgBox.innerText = "填写生日";                         return false;                           }}return true;}function check_focus(obj) {var msgBox = obj.parentNode.getElementsByTagName("label")[0];// 当鼠标在文本框上，清空消息框msgBox.className = "change_color";msgBox.innerText = "";}</script>

页面

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>table {width: 500px;text-align: center;}td {border-style: none;}.change_color {color: red;}</style><!-- 类选择器, 不符合条件, 改变label的颜色 --> <script>// 在上面</script></head><body><form action="post" onsubmit="return check_form(this)"><table align="center" border="1px" cellpadding="0" cellspacing="0"><tr><td>姓名</td><td><input type="text" name="name" onblur="check_item(this)" onfocus="check_focus(this)" /><label class="change_color"></label></td></tr><tr><td>年龄</td><td><input type="text" name="age" onblur="check_item(this)" onfocus="check_focus(this)" /><label class="change_color"></label></td></tr><tr><td>性别</td><td><input type="radio" name="gender" value="男" checked="checked"/>男<input type="radio" name="gender" value="女"/>女</td></tr><tr><td>生日</td><td><input type="text" name="birthday" onblur="check_item(this)" onfocus="check_focus(this)"/><label class="change_color"></label>                        </td></tr>              <tr><td colspan="2"><input type="submit" value="提交"/><input type="reset" value="重置" /></td></tr>             </table></form></body>
</html>

测试
当我输入不填内容时，onblur，给出提示

填年龄时，onfocus 清除后面的提示
填写完整
提交check_form判断，地址栏显示提交数据

js表单验证，给出友好的提示相关推荐

掌财社:html5中AmazeUI框架中JS表单验证实战案例展示！
今天和大家分享个有关于"html5中AmazeUI框架中JS表单验证实战案例展示!"这方面的相关内容知识,让大家对于html5中AmazeUI框架也可以有所了解! 1.需求做一个 ...
分享21个JS抽奖转盘特效，36个JS表单验证，31个JS进度条，总有一款适合您
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您下载链接:https://pan.baidu.com/s/1TWOGqes5J2baelO9qdItXg?pwd=ma ...
anjular.js表单验证实例
应用声明,控制器 <form action="" method="post" id="myForm" name="logFo ...
通用的JS表单验证插件代码
一个通用的JS表单验证插件代码.使用方法:第一步:需设定表单项数据类型,第二步:实例表单验证,验证错误提示说明(程序有自带相关错误提示,可自定义每项验证错误提示时文本,只需添加msg). [task] ...
JS表单验证(HTML+CSS+JS)详细教程
大家好,今天分享一个HTML+CSS+JS表单验证,这是我前两天学习的一个小demo,在这记录一下. 目录一.效果图二.介绍三.代码 (1)HTML (2)CSS (3)JavaScript J ...
JS表单验证-12个常用的JS表单验证
JS表单验证-12个常用的JS表单验证表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1.长度限制 <p>1. 长度限制</p&g ...
js表单验证（常用的正则表达式）
js表单验证的正则表达式,test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false. 语法:let reg=/正则表达式主体/修饰符(可 ...
js表单验证密码(确认密码)，密码长度至少8位，并且英文与数字组合
js表单验证密码(确认密码) 案例需求:在注册时,输入密码对其进行密码强度验证,并判断两次输入的密码是否一致.例如,密码长度至少8位,并且英文与数字组合. 代码实现 <p>输入密码:< ...
jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
validateform.js表单验证工具
官网地址: http://validform.rjboy.cn/ 配置说明: http://validform.rjboy.cn/document.html#config 优点:只要每个需要验证的对象 ...

js表单验证，给出友好的提示

js验证表单

代码实现

js表单验证，给出友好的提示相关推荐

最新文章

热门文章